27 CSS Button Hover Effects 17 / 27
Slide Doors
Two panels slide in from opposite sides and meet in the middle to fill the entire button.
The code
<button class="bhe-17__btn"><span class="bhe-17__label">Slide Doors</span></button>
<button class="bhe-17__btn"><span class="bhe-17__label">Slide Doors</span></button>.bhe-17__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-17__btn {
position: relative;
overflow: hidden;
}
.bhe-17__btn::before,
.bhe-17__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-17__btn::before {
left: 0;
transform: translateX(-101%);
}
.bhe-17__btn::after {
right: 0;
transform: translateX(101%);
}
.bhe-17__btn .bhe-17__label {
position: relative;
z-index: 1;
transition: color 0.4s;
}
.bhe-17__btn:hover::before {
transform: translateX(0);
}
.bhe-17__btn:hover::after {
transform: translateX(0);
}
.bhe-17__btn:hover .bhe-17__label {
color: #fff;
} .bhe-17__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-17__btn {
position: relative;
overflow: hidden;
}
.bhe-17__btn::before,
.bhe-17__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-17__btn::before {
left: 0;
transform: translateX(-101%);
}
.bhe-17__btn::after {
right: 0;
transform: translateX(101%);
}
.bhe-17__btn .bhe-17__label {
position: relative;
z-index: 1;
transition: color 0.4s;
}
.bhe-17__btn:hover::before {
transform: translateX(0);
}
.bhe-17__btn:hover::after {
transform: translateX(0);
}
.bhe-17__btn:hover .bhe-17__label {
color: #fff;
}