CSSだけで作るホバーで横からするっと色が変わるボタン

.c-btn.slide {
  background: #fff;
  color: #ff701e;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.c-btn.slide::after {
  background: #ff701e;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

.c-btn.slide:hover {
  color: #fff;
}

.c-btn.slide:hover::after {
  transform: scale(1, 1);
}