CSS
.bhe-19__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-19__btn {
position: relative;
overflow: hidden;
}
.bhe-19__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-19__seg:nth-child(1) {
left: 0%;
transition-delay: 0s;
}
.bhe-19__seg:nth-child(2) {
left: 20%;
transition-delay: 0.04s;
}
.bhe-19__seg:nth-child(3) {
left: 40%;
transition-delay: 0.08s;
}
.bhe-19__seg:nth-child(4) {
left: 60%;
transition-delay: 0.12s;
}
.bhe-19__seg:nth-child(5) {
left: 80%;
transition-delay: 0.16s;
}
.bhe-19__label {
position: relative;
z-index: 1;
transition: color 0.4s 0.1s;
}
.bhe-19__btn:hover .bhe-19__seg {
transform: scaleY(1);
}
.bhe-19__btn:hover .bhe-19__label {
color: #fff;
}