3D Pushable Button
A layered 3D button: the face floats above a darker edge and a soft shadow. It rises on hover and presses flat on click, with a springy cubic-bezier on the way up.
Also known as: 3d button css, pushable button, press down button.
HTML
<button class="btn-pushable-3d"> <span class="btn-pushable-3d-shadow"></span> <span class="btn-pushable-3d-edge"></span> <span class="btn-pushable-3d-front">Push me</span> </button>
CSS
.btn-pushable-3d {
--c: var(--btn-color, #3b82f6);
position: relative;
padding: 0;
border: 0;
background: transparent;
font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
cursor: pointer;
transition: filter 0.25s ease;
}
.btn-pushable-3d-shadow,
.btn-pushable-3d-edge {
position: absolute;
inset: 0;
border-radius: 0.75em;
}
.btn-pushable-3d-shadow {
background: color-mix(in srgb, #000 22%, transparent);
filter: blur(0.2em);
transform: translateY(0.15em);
transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-pushable-3d-edge {
background: linear-gradient(to left,
color-mix(in srgb, var(--c) 45%, #000) 0%,
color-mix(in srgb, var(--c) 65%, #000) 8%,
color-mix(in srgb, var(--c) 65%, #000) 92%,
color-mix(in srgb, var(--c) 45%, #000) 100%);
}
.btn-pushable-3d-front {
position: relative;
display: block;
padding: 0.75em 2em;
border-radius: 0.75em;
background: var(--c);
color: #fff;
transform: translateY(-0.3em);
transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-pushable-3d:is(:hover, :focus-visible) { filter: brightness(1.1); }
.btn-pushable-3d:is(:hover, :focus-visible) .btn-pushable-3d-front {
transform: translateY(-0.5em);
transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.btn-pushable-3d:is(:hover, :focus-visible) .btn-pushable-3d-shadow {
transform: translateY(0.3em);
transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.btn-pushable-3d:active .btn-pushable-3d-front {
transform: translateY(-0.1em);
transition: transform 34ms;
}
.btn-pushable-3d:active .btn-pushable-3d-shadow {
transform: translateY(0.05em);
transition: transform 34ms;
}
@media (prefers-reduced-motion: reduce) {
.btn-pushable-3d, .btn-pushable-3d *, .btn-pushable-3d::before, .btn-pushable-3d::after, .btn-pushable-3d *::before, .btn-pushable-3d *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<button class="group rounded-xl bg-blue-800 p-0 font-semibold text-white"> <span class="block -translate-y-1 rounded-xl bg-blue-500 px-8 py-3 transition-transform duration-500 ease-[cubic-bezier(.3,.7,.4,1.5)] group-hover:-translate-y-2 group-hover:duration-200 group-active:-translate-y-0.5 group-active:duration-75">Push me</span> </button>
Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.