Back to CSS Button Hover Effects Slide Doors Pure CSS
Share
HTML
<button class="bhe-11__btn"><span class="bhe-11__label">Slide Doors</span></button>
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;
}