27 CSS Button Hover Effects 22 / 27
Morph Shape
The button border-radius morphs from rectangle to pill and color transitions simultaneously.
The code
<button class="bhe-22__btn">Hover Me</button>
<button class="bhe-22__btn">Hover Me</button>.bhe-22__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-22__btn {
background: #ff6c8a;
color: #fff;
border: none;
transition:
border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
background 0.3s,
transform 0.2s;
}
.bhe-22__btn:hover {
border-radius: 50px;
background: #7c6cff;
transform: scaleX(0.92);
} .bhe-22__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-22__btn {
background: #ff6c8a;
color: #fff;
border: none;
transition:
border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
background 0.3s,
transform 0.2s;
}
.bhe-22__btn:hover {
border-radius: 50px;
background: #7c6cff;
transform: scaleX(0.92);
}More from 27 CSS Button Hover Effects
Hard Shadow ShiftRainbow Border SpinIcon Slide InStagger FillSunburst Expand3D PressTypewriter RetypeRipple WaveCursor SpotlightMinimalist Border & Outline Drawing Hover EffectsModern 3D Skeuomorphic Button Press EffectsNeo-Brutalist & Cyberpunk Button Glow Effects
View the full collection →