27 CSS Button Hover Effects 07 / 27
Liquid Fill
Background floods upward like liquid filling a container via pseudo-element height transition.
The code
<button class="bhe-07__btn">Hover Me</button>
<button class="bhe-07__btn">Hover Me</button>.bhe-07__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-07__btn {
position: relative;
color: #7c6cff;
background: transparent;
border: 2px solid #7c6cff;
overflow: hidden;
transition: color 0.4s;
z-index: 0;
}
.bhe-07__btn::before {
content: "";
position: absolute;
bottom: -2px;
left: -2px;
right: -2px;
height: 0;
background: #7c6cff;
transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
}
.bhe-07__btn:hover {
color: #fff;
}
.bhe-07__btn:hover::before {
height: calc(100% + 4px);
} .bhe-07__btn {
padding: 12px 32px;
font-size: 13.5px;
font-family: inherit;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.02em;
background: transparent;
color: inherit;
}
.bhe-07__btn {
position: relative;
color: #7c6cff;
background: transparent;
border: 2px solid #7c6cff;
overflow: hidden;
transition: color 0.4s;
z-index: 0;
}
.bhe-07__btn::before {
content: "";
position: absolute;
bottom: -2px;
left: -2px;
right: -2px;
height: 0;
background: #7c6cff;
transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
}
.bhe-07__btn:hover {
color: #fff;
}
.bhe-07__btn:hover::before {
height: calc(100% + 4px);
}