20 CSS Link Hover Effect Designs 19 / 20
3D Flip Reveal
Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back.
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> <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);
} .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);
}