Back to CSS Button Hover Effects Icon Slide In Pure CSS
Share
HTML
<button class="bhe-17__btn">Get Started<span class="bhe-17__icon">→</span></button>
CSS
.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;
  transition: padding 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-17__icon {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    right 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s;
}
.bhe-17__btn:hover {
  padding-right: 52px;
}
.bhe-17__btn:hover .bhe-17__icon {
  right: 16px;
  opacity: 1;
}