Weekend in Lisbon
Three days of tiles, tarts and trams.
Hanging Sign Flip Hover
A shop sign hanging from a nail that spins round to its other side on hover and swings a few times before it settles. The spring is a linear() easing curve, with a cubic-bezier fallback.
Also known as: open closed sign hover, swinging sign css, spring flip card.
Open
Closed
HTML
<div class="hfx-hanging-sign">
<span class="hfx-hanging-sign-nail"></span>
<div class="hfx-hanging-sign-board">
<svg class="hfx-hanging-sign-string" viewBox="0 0 100 40" preserveAspectRatio="none" aria-hidden="true"><path d="M4 40 50 1 96 40"/></svg>
<span class="hfx-hanging-sign-front">Open</span>
<span class="hfx-hanging-sign-back">Closed</span>
</div>
</div>CSS
.hfx-hanging-sign {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
display: grid;
justify-items: center;
perspective: 30em;
font-family: system-ui, sans-serif;
}
.hfx-hanging-sign-nail {
position: relative;
z-index: 1;
width: 0.7em;
height: 0.7em;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #f3f4f6, color-mix(in srgb, var(--c) 30%, #4b5563));
box-shadow: 0 0.1em 0.2em color-mix(in srgb, #000 30%, transparent);
}
.hfx-hanging-sign-board {
position: relative;
width: 9.5em;
height: 3.6em;
margin-top: 1.6em;
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.3, 1.5, 0.5, 1);
transition: transform 1.6s linear(0, 0.25 6%, 0.62 12%, 0.94 18%, 1.12 24%, 1.17 29%, 1.12 34%, 1.02 41%, 0.95 48%, 0.94 53%, 0.97 60%, 1.01 68%, 1.02 75%, 1 88%, 1);
}
.hfx-hanging-sign-string {
position: absolute;
left: 1em;
bottom: 100%;
width: calc(100% - 2em);
height: 1.95em;
overflow: visible;
fill: none;
stroke: color-mix(in srgb, var(--c) 35%, #78716c);
stroke-width: 0.12em;
stroke-linejoin: round;
}
.hfx-hanging-sign-string path {
vector-effect: non-scaling-stroke;
}
.hfx-hanging-sign-front,
.hfx-hanging-sign-back {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding-left: 0.12em;
border-radius: 0.5em;
color: #fff;
font-size: 1.35em;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
backface-visibility: hidden;
}
.hfx-hanging-sign-front {
background: var(--c);
box-shadow: inset 0 0 0 0.2em var(--c), inset 0 0 0 0.28em color-mix(in srgb, #fff 55%, transparent), 0 0.4em 0.8em color-mix(in srgb, var(--c) 30%, transparent);
}
.hfx-hanging-sign-back {
background: color-mix(in srgb, var(--c) 25%, #1f2937);
box-shadow: inset 0 0 0 0.2em color-mix(in srgb, var(--c) 25%, #1f2937), inset 0 0 0 0.28em color-mix(in srgb, #fff 35%, transparent);
transform: rotateY(180deg);
}
.hfx-hanging-sign:hover .hfx-hanging-sign-board {
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
.hfx-hanging-sign, .hfx-hanging-sign *, .hfx-hanging-sign::before, .hfx-hanging-sign::after, .hfx-hanging-sign *::before, .hfx-hanging-sign *::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.