27 CSS Button Hover Effects 11 / 27
Split Reveal
The button splits at the centre — top half slides up, bottom half slides down — both halves show the same text.
The code
<button class="bhe-11__btn"> <span class="bhe-11__top">Split Reveal</span> <span class="bhe-11__bottom" aria-hidden="true">Split Reveal</span> </button>
<button class="bhe-11__btn">
<span class="bhe-11__top">Split Reveal</span>
<span class="bhe-11__bottom" aria-hidden="true">Split Reveal</span>
</button>.bhe-11__btn {
padding: 12px 32px;
font-family: inherit;
border-radius: 8px;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-11__btn {
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.15);
background: #17171f;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.bhe-11__top {
display: block;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__bottom {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #7c6cff;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
transform: translateY(50%);
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__btn:hover .bhe-11__top {
transform: translateY(-50%);
}
.bhe-11__btn:hover .bhe-11__bottom {
transform: translateY(0);
} .bhe-11__btn {
padding: 12px 32px;
font-family: inherit;
border-radius: 8px;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-11__btn {
position: relative;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.15);
background: #17171f;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.bhe-11__top {
display: block;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__bottom {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #7c6cff;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
transform: translateY(50%);
transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__btn:hover .bhe-11__top {
transform: translateY(-50%);
}
.bhe-11__btn:hover .bhe-11__bottom {
transform: translateY(0);
}More from 27 CSS Button Hover Effects
Morph ShapeIcon Slide InStagger 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 Effects
View the full collection →