3D Cube Flip Button
The button is the front of a cube. On hover the cube rolls forward and its top face, filled with a second label, turns to face you. Two faces on a preserve-3d box.
Also known as: 3d rotating cube button, flip box button, css cube button hover.
HTML
<button class="hfx-cube-flip-button" aria-label="Subscribe">
<span class="hfx-cube-flip-button-box">
<span class="hfx-cube-flip-button-front">Subscribe</span>
<span class="hfx-cube-flip-button-top">It's free</span>
</span>
</button>CSS
.hfx-cube-flip-button {
--c: var(--hfx-color, #3b82f6);
font: 600 1em system-ui, sans-serif;
font-size: var(--hfx-size, 16px);
padding: 0;
border: 0;
background: none;
cursor: pointer;
perspective: 30em;
}
.hfx-cube-flip-button-box {
position: relative;
display: block;
width: 9em;
height: 2.8em;
transform-style: preserve-3d;
transform: translateZ(-1.4em);
transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.hfx-cube-flip-button-front,
.hfx-cube-flip-button-top {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 0.5em;
backface-visibility: hidden;
}
.hfx-cube-flip-button-front {
border: 2px solid var(--c);
background: color-mix(in srgb, var(--c) 10%, #fff);
color: color-mix(in srgb, var(--c) 80%, #000);
transform: translateZ(1.4em);
}
.hfx-cube-flip-button-top {
background: var(--c);
color: #fff;
transform: rotateX(90deg) translateZ(1.4em);
}
.hfx-cube-flip-button:is(:hover, :focus-visible) .hfx-cube-flip-button-box {
transform: translateZ(-1.4em) rotateX(-90deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-cube-flip-button, .hfx-cube-flip-button *, .hfx-cube-flip-button::before, .hfx-cube-flip-button::after, .hfx-cube-flip-button *::before, .hfx-cube-flip-button *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - 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.