Levitating Button
The button lifts off the page and bobs gently in place while a soft ground shadow shrinks and fades beneath it. The lift is a transition on translate, the bob is a loop on transform, so they stack.
Also known as: floating button animation, hover float effect, bobbing button.
HTML
<button class="btn-levitate">Take off</button>
CSS
.btn-levitate {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
cursor: pointer;
position: relative;
padding: 0.8em 2em;
border: 0;
border-radius: 0.7em;
background: var(--c);
color: #fff;
transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
.btn-levitate::after {
content: "";
position: absolute;
top: calc(100% + 0.45em);
left: 12%;
right: 12%;
height: 0.6em;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
pointer-events: none;
transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s ease, opacity 0.45s ease;
}
.btn-levitate:is(:hover, :focus-visible) {
translate: 0 -0.7em;
animation: btn-levitate-bob 2.4s ease-in-out 0.45s infinite;
}
.btn-levitate:is(:hover, :focus-visible)::after {
translate: 0 0.7em;
scale: 0.8;
opacity: 0.7;
animation: btn-levitate-ground 2.4s ease-in-out 0.45s infinite;
}
@keyframes btn-levitate-bob {
50% { transform: translateY(-0.35em); }
}
@keyframes btn-levitate-ground {
50% { transform: translateY(0.35em) scale(0.8); opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.btn-levitate, .btn-levitate *, .btn-levitate::before, .btn-levitate::after, .btn-levitate *::before, .btn-levitate *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}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.