【備忘録：CSS】hover時のボタンアニメーション

hover時にいい感じのアニメーションにする

このような感じで、背景がボタンにかぶさるようなアニメーションをしていきます。

ソース

btn.html

<div class="l-btn">
  <button class="m-btn">
    button
  </button>
</div>

HTMLは普通のボタンを配置している状態です。

btn.scss

.l-btn{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

button{//ボタンリセット
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
.m-btn{//ボタンスタイル
  position: relative;
  width: 100%;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px 20px;
  margin-top: 30px;
  transition: all .4s ease;
  &::before{//hover時の黒背景を準備
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0;//黒背景の幅は0に
    height: 100%;//黒背景の高さを確保
    border-radius: 7px;
    z-index: -1;//hover時、テキストが見えるように-1に
    transition: all .4s ease;
  }
  &:hover{
    color: #fff;
    &::before{
      width: 100%;//幅100%にして黒背景をしきつめる
      background: #000;
    }
  }
}

cssは上記の形です。
ポイントはz-indexでテキストを表示させるようにするところです。

黒背景が上に被さるので、z-indeがないとテキストが黒背景に被るのですが、z-indexでマイナスを入れることでテキストが上にくるようになります。

このようなボタンを見かけますが、どのようになっているのだろうと思い作成してみました。