27 CSS Button Hover Effects 25 / 27
Stagger Fill
Five vertical segments fill upward one by one in a cascading waterfall sequence.
The code
<button class="bhe-25__btn"> <span class="bhe-25__seg"></span> <span class="bhe-25__seg"></span> <span class="bhe-25__seg"></span> <span class="bhe-25__seg"></span> <span class="bhe-25__seg"></span> <span class="bhe-25__label">Hover Me</span> </button>
<button class="bhe-25__btn">
<span class="bhe-25__seg"></span>
<span class="bhe-25__seg"></span>
<span class="bhe-25__seg"></span>
<span class="bhe-25__seg"></span>
<span class="bhe-25__seg"></span>
<span class="bhe-25__label">Hover Me</span>
</button>.bhe-25__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-25__btn {
position: relative;
overflow: hidden;
}
.bhe-25__seg {
position: absolute;
top: 0;
width: 20%;
height: 100%;
background: #7c6cff;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-25__seg:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.bhe-25__seg:nth-child(2) {
left: 20%;
transition-delay: 0.04s;
}
.bhe-25__seg:nth-child(3) {
left: 40%;
transition-delay: 0.08s;
}
.bhe-25__seg:nth-child(4) {
left: 60%;
transition-delay: 0.12s;
}
.bhe-25__seg:nth-child(5) {
left: 80%;
transition-delay: 0.16s;
}
.bhe-25__label {
position: relative;
z-index: 1;
transition: color 0.4s 0.1s;
}
.bhe-25__btn:hover .bhe-25__seg {
transform: scaleY(1);
}
.bhe-25__btn:hover .bhe-25__label {
color: #fff;
} .bhe-25__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-25__btn {
position: relative;
overflow: hidden;
}
.bhe-25__seg {
position: absolute;
top: 0;
width: 20%;
height: 100%;
background: #7c6cff;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-25__seg:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.bhe-25__seg:nth-child(2) {
left: 20%;
transition-delay: 0.04s;
}
.bhe-25__seg:nth-child(3) {
left: 40%;
transition-delay: 0.08s;
}
.bhe-25__seg:nth-child(4) {
left: 60%;
transition-delay: 0.12s;
}
.bhe-25__seg:nth-child(5) {
left: 80%;
transition-delay: 0.16s;
}
.bhe-25__label {
position: relative;
z-index: 1;
transition: color 0.4s 0.1s;
}
.bhe-25__btn:hover .bhe-25__seg {
transform: scaleY(1);
}
.bhe-25__btn:hover .bhe-25__label {
color: #fff;
}