3D Button
A copy-paste 3d effects component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
3D EffectsHTMLCSSany framework
Copy into your project
HTML
<button class="nuda-3d-btn" type="button">Click me</button>CSS
/* 3D Button
Button with a 3D press/depth effect using box-shadow.
Customize: --btn-color, --btn-shadow, --btn-text */
.nuda-3d-btn {
--btn-color: #e4ff54;
--btn-shadow: #8fa324;
--btn-text: #0a0a0a;
position: relative;
background: var(--btn-color);
color: var(--btn-text);
font-size: 0.9rem;
font-weight: 700;
padding: 0.65rem 1.75rem;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 0 var(--btn-shadow);
transform: translateY(0);
transition:
transform 0.1s ease,
box-shadow 0.1s ease;
}
.nuda-3d-btn:hover {
transform: translateY(-1px);
box-shadow: 0 5px 0 var(--btn-shadow);
}
.nuda-3d-btn:active {
transform: translateY(3px);
box-shadow: 0 1px 0 var(--btn-shadow);
}
.nuda-3d-btn:focus-visible {
outline: 2px solid var(--btn-color);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.nuda-3d-btn {
transition: none;
}
}How to use 3D 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.