CSS
.bhe-11__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-11__btn {
position: relative;
overflow: hidden;
}
.bhe-11__btn::before,
.bhe-11__btn::after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #7c6cff;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__btn::before {
left: 0;
transform: translateX(-101%);
}
.bhe-11__btn::after {
right: 0;
transform: translateX(101%);
}
.bhe-11__btn .bhe-11__label {
position: relative;
z-index: 1;
transition: color 0.4s;
}
.bhe-11__btn:hover::before {
transform: translateX(0);
}
.bhe-11__btn:hover::after {
transform: translateX(0);
}
.bhe-11__btn:hover .bhe-11__label {
color: #fff;
}