27 CSS Button Hover Effects 14 / 27
Center Underline Draw
A gradient underline expands symmetrically outward from the center of the button text.
The code
<button class="bhe-14__btn">Hover Me</button>
<button class="bhe-14__btn">Hover Me</button>.bhe-14__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-14__btn {
position: relative;
background: transparent;
border: none;
}
.bhe-14__btn::after {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
right: 50%;
height: 2px;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
transition:
left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
}
.bhe-14__btn:hover::after {
left: 32px;
right: 32px;
} .bhe-14__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.02em;
color: inherit;
background: transparent;
}
.bhe-14__btn {
position: relative;
background: transparent;
border: none;
}
.bhe-14__btn::after {
content: "";
position: absolute;
bottom: 5px;
left: 50%;
right: 50%;
height: 2px;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
transition:
left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
}
.bhe-14__btn:hover::after {
left: 32px;
right: 32px;
}