20 CSS Link Hover Effect Designs
3D Flip Reveal
Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back. Uses transform-style: preserve-3d and backface-visibility.
3D Flip Reveal the 19th of 20 designs in the 20 CSS Link Hover Effect Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<a href="#" class="cle-flip">
<span class="cle-flip-inner">
<span class="cle-flip-front">Get Started</span>
<span class="cle-flip-back">Learn More →</span>
</span>
<span class="cle-flip-ghost" aria-hidden="true">Learn More →</span>
</a> .cle-flip {
position: relative;
display: inline-block;
height: 40px;
padding: 0 22px;
perspective: 800px;
text-decoration: none;
font:
700 13px/40px ui-monospace,
monospace;
letter-spacing: 0.12em;
}
/* Invisible ghost claims the wider of the two faces so the chip width is stable */
.cle-flip-ghost {
visibility: hidden;
white-space: nowrap;
}
.cle-flip-inner {
position: absolute;
inset: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-flip-front,
.cle-flip-back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
white-space: nowrap;
}
.cle-flip-front {
background: #7c6cff;
color: #fff;
}
.cle-flip-back {
background: #2eb88a;
color: #0a0f0c;
transform: rotateY(180deg);
}
.cle-flip:hover .cle-flip-inner,
.cle-flip:focus-visible .cle-flip-inner {
transform: rotateY(180deg);
}