ホバーすると背景がスライドして色が変化するボタンの作成方法をご紹介します。
下記のボタンのような感じで、ホバーすると背景がスライドします。
CSSのみで簡単に実装できます。

背景が左から右へスライドするボタン

HTML

<p class="link-button-slide"><a href="#" class="slide-button">ボタン</a></p>

CSS

p.link-button-slide {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.slide-button {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #4b9ab9;
  background: #eaf9fc;
  border: solid 1px #4b9ab9;
  border-radius: 50px;
  width: 250px;
  padding: 10px;
  margin: 0 auto;
  overflow: hidden;
  text-decoration: none;
  transition: 0.3s;
  z-index: 1;
}
.slide-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #99cbe5;
  transition: 0.3s;
  z-index: -1;
}
.slide-button:hover {
  color: #fff;
  background: none;
  border: solid 1px #99cbe5;
  opacity: 1;
}
.slide-button:hover:before {
  width: 100%;
}

背景色変化のcssを擬似要素(:before)で記述して横幅を0にして非表示のような状態に。
ホバーすると横幅が100%になって表示されます。

テキストカラーと枠線カラーはaタグの「slide-button」クラスで指定します。
ホバー後のカラー変化も必要であれば変更してください。

POINT
ここでポイントなのが、
aタグ「slide-button」に「display: inline-block;」の記述を入れることで、
この記述がないと、横幅の情報とホバー後の背景のはみ出た部分の処理設定
「overflow: hidden;」が効かず、上手く機能しません。
必ず入れるようにしましょう。

右から左にスライドさせたい場合

次に、スライドが上下に動くボタンと斜めに動くボタンもご紹介します。

背景が上から下へスライドするボタン

HTML

<p class="link-button-slide"><a href="#" class="slide-button2">ボタン</a></p>

CSS

p.link-button-slide {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.slide-button2 {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #4b9ab9;
  background: #eaf9fc;
  border: solid 1px #4b9ab9;
  border-radius: 50px;
  width: 250px;
  padding: 10px;
  margin: 0 auto;
  overflow: hidden;
  text-decoration: none;
  transition: 0.3s;
  z-index: 1;
}
.slide-button2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #99cbe5;
  transition: 0.3s;
  z-index: -1;
}
.slide-button2:hover {
  color: #fff;
  background: none;
  border: solid 1px #99cbe5;
  opacity: 1;
}
.slide-button2:hover:before {
  height: 100%;
}

こちらの場合、擬似要素(:before)の高さを0にして非表示のような状態にしておきます。
ホバーすると高さが100%になり、上から下へとスライドするように表示されます。

下から上にスライドさせたい場合

背景が斜めにスライドするボタン

HTML

<p class="link-button-slide"><a href="#" class="slide-button3">ボタン</a></p>

CSS

p.link-button-slide {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.slide-button3 {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #4b9ab9;
  background: #eaf9fc;
  border: solid 1px #4b9ab9;
  border-radius: 50px;
  width: 250px;
  padding: 10px;
  margin: 0 auto;
  overflow: hidden;
  text-decoration: none;
  transition: 0.5s;
  z-index: 1;
}
.slide-button3:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(45deg, #99cbe5 50%, transparent 50%);
  background-position: 100%;
  background-size: 300%;
  transition: 0.5s;
  z-index: -1;
}
.slide-button3:hover {
  color: #fff;
  background: none;
  border: solid 1px #99cbe5;
  opacity: 1;
}
.slide-button3:hover:before {
  background-position: 0;
}

打って変わって、こちらは上記２ボタンとは記述が異なります。
background-image: linear-gradientを挿入して斜めの画像を作成。
background-position: 100%;にして左下の方に置いておき、
ホバーをすると、数値が0となり右上へと移動し、
スライドしているように見える仕組みとなっています。

右上から左下にスライドさせたい場合

以上になります。
割とよく使うボタンなので、記事にしてまとめました。
少しでも参考になりましたら幸いです。