27 CSS Button Hover Effects 15 / 27
3D Flip
The button flips on its X axis to reveal a second face — pure CSS 3D transform perspective.
The code
<div class="bhe-15__wrapper">
<button class="bhe-15__btn">
<span class="bhe-15__front">Hover Me</span>
<span class="bhe-15__back">Flipped!</span>
</button>
</div> <div class="bhe-15__wrapper">
<button class="bhe-15__btn">
<span class="bhe-15__front">Hover Me</span>
<span class="bhe-15__back">Flipped!</span>
</button>
</div>.bhe-15__wrapper {
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-15__wrapper {
perspective: 600px;
display: inline-block;
}
.bhe-15__btn {
position: relative;
display: block;
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
background: transparent;
border: none;
}
.bhe-15__front,
.bhe-15__back {
display: block;
padding: 12px 32px;
border-radius: 8px;
backface-visibility: hidden;
}
.bhe-15__front {
background: #ff6c8a;
color: #fff;
}
.bhe-15__back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #7c6cff;
color: #fff;
transform: rotateX(180deg);
}
.bhe-15__wrapper:hover .bhe-15__btn {
transform: rotateX(180deg);
} .bhe-15__wrapper {
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-15__wrapper {
perspective: 600px;
display: inline-block;
}
.bhe-15__btn {
position: relative;
display: block;
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
background: transparent;
border: none;
}
.bhe-15__front,
.bhe-15__back {
display: block;
padding: 12px 32px;
border-radius: 8px;
backface-visibility: hidden;
}
.bhe-15__front {
background: #ff6c8a;
color: #fff;
}
.bhe-15__back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #7c6cff;
color: #fff;
transform: rotateX(180deg);
}
.bhe-15__wrapper:hover .bhe-15__btn {
transform: rotateX(180deg);
}More from 27 CSS Button Hover Effects
Stagger FillSunburst Expand3D PressTypewriter RetypeRipple WaveCursor SpotlightMinimalist Border & Outline Drawing Hover EffectsModern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow EffectsSliding Background Color Wipe Button EffectsLiquid Fill & Organic Morphing Button EffectsKinetic Text Flip & Icon Reveal Button Effects
View the full collection →