Split Flap Button
A departure board flap: the top half of the label falls forward on its hinge and lands with a small bounce, showing the next word. Four half-height copies of the text and one rotating flap.
Also known as: flip clock button, departure board flip, solari board hover.
HTML
<button class="hfx-split-flap-button" aria-label="Book now">
<span class="hfx-split-flap-button-half hfx-split-flap-button-up" aria-hidden="true">Let's go</span>
<span class="hfx-split-flap-button-half hfx-split-flap-button-down" aria-hidden="true">Book now</span>
<span class="hfx-split-flap-button-flap" aria-hidden="true">
<span class="hfx-split-flap-button-half hfx-split-flap-button-up">Book now</span>
<span class="hfx-split-flap-button-half hfx-split-flap-button-down hfx-split-flap-button-back">Let's go</span>
</span>
</button>CSS
.hfx-split-flap-button {
--c: var(--hfx-color, #3b82f6);
font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--hfx-size, 16px);
position: relative;
width: 9em;
height: 2.8em;
padding: 0;
border: 0;
border-radius: 0.45em;
background: none;
color: #fff;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
perspective: 14em;
}
.hfx-split-flap-button-half {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: flex;
justify-content: center;
padding-left: 0.08em;
overflow: hidden;
line-height: 2.8em;
backface-visibility: hidden;
}
.hfx-split-flap-button-up {
top: 0;
align-items: flex-start;
border-radius: 0.45em 0.45em 0 0;
background: color-mix(in srgb, var(--c) 86%, #fff);
box-shadow: inset 0 -1px color-mix(in srgb, var(--c) 60%, #000);
}
.hfx-split-flap-button-down {
bottom: 0;
align-items: flex-end;
border-radius: 0 0 0.45em 0.45em;
background: var(--c);
}
.hfx-split-flap-button-flap {
position: absolute;
inset: 0 0 50%;
transform-origin: 50% 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.55, 0, 0.35, 1.2);
}
.hfx-split-flap-button-flap .hfx-split-flap-button-half {
height: 100%;
}
.hfx-split-flap-button-back {
top: 0;
transform: rotateX(180deg);
}
.hfx-split-flap-button:is(:hover, :focus-visible) .hfx-split-flap-button-flap {
transform: rotateX(-180deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-split-flap-button, .hfx-split-flap-button *, .hfx-split-flap-button::before, .hfx-split-flap-button::after, .hfx-split-flap-button *::before, .hfx-split-flap-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.