3D Press
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-btn-press-3d">Press</button>CSS
/* 3D Press — a pushable button: the offset shadow collapses as it travels down. */
.nuda-btn-press-3d {
padding: 12px 30px;
background: #e4ff54;
color: #09090b;
border: 0;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transform: translateY(-4px);
box-shadow: 0 4px 0 #9bb02e, 0 8px 16px -6px rgba(0, 0, 0, 0.6);
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nuda-btn-press-3d:hover {
transform: translateY(-5px);
box-shadow: 0 5px 0 #9bb02e, 0 10px 18px -6px rgba(0, 0, 0, 0.6);
}
.nuda-btn-press-3d:active {
transform: translateY(0);
box-shadow: 0 0 0 #9bb02e, 0 3px 8px -4px rgba(0, 0, 0, 0.5);
}
.nuda-btn-press-3d:focus-visible {
outline: 2px solid #e4ff54;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.nuda-btn-press-3d { transition: none; }
}How to use 3D Press
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.