Rotating Prism Button
A triangular prism with a label on each side. While hovered it rolls through all three faces with a pause on each, so one button carries a call to action and two reassurances.
Also known as: triangular prism button, 3d rotating text button, three sided flip button.
HTML
<button class="hfx-prism-button" aria-label="Start free trial">
<span class="hfx-prism-button-prism">
<span class="hfx-prism-button-face" style="--i: 0">Start free trial</span>
<span class="hfx-prism-button-face" style="--i: 1">No card needed</span>
<span class="hfx-prism-button-face" style="--i: 2">Cancel anytime</span>
</span>
</button>CSS
.hfx-prism-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;
color: #fff;
cursor: pointer;
perspective: 30em;
}
.hfx-prism-button-prism {
position: relative;
display: block;
width: 10.5em;
height: 2.8em;
transform-style: preserve-3d;
transform: translateZ(-0.81em);
}
.hfx-prism-button-face {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border-radius: 0.3em;
background: var(--c);
backface-visibility: hidden;
transform: rotateX(calc(var(--i) * 120deg)) translateZ(0.81em);
}
.hfx-prism-button-face:nth-child(2) {
background: color-mix(in srgb, var(--c) 78%, #000);
}
.hfx-prism-button-face:nth-child(3) {
background: color-mix(in srgb, var(--c) 62%, #000);
}
.hfx-prism-button:is(:hover, :focus-visible) .hfx-prism-button-prism {
animation: hfx-prism-button-roll 3.6s cubic-bezier(0.65, 0, 0.3, 1.25) infinite;
}
@keyframes hfx-prism-button-roll {
0% { transform: translateZ(-0.81em) rotateX(0deg); }
12%, 33% { transform: translateZ(-0.81em) rotateX(-120deg); }
45%, 66% { transform: translateZ(-0.81em) rotateX(-240deg); }
78%, 100% { transform: translateZ(-0.81em) rotateX(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-prism-button, .hfx-prism-button *, .hfx-prism-button::before, .hfx-prism-button::after, .hfx-prism-button *::before, .hfx-prism-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.