Neumorphic Button
A copy-paste buttons component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
ButtonsHTMLCSSany framework
Copy into your project
HTML
<button class="nuda-neumo">Press me</button>CSS
.nuda-neumo {
padding: 11px 24px;
background: #1a1a20;
color: #fafafa;
border: 0;
border-radius: 14px;
font-weight: 600;
cursor: pointer;
box-shadow:
6px 6px 12px rgba(0, 0, 0, 0.5),
-4px -4px 10px rgba(255, 255, 255, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
transition: box-shadow 0.25s, transform 0.15s;
}
.nuda-neumo:active {
transform: translateY(1px);
box-shadow:
inset 4px 4px 8px rgba(0, 0, 0, 0.55),
inset -3px -3px 6px rgba(255, 255, 255, 0.04);
}How to use Neumorphic Button
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.