CSSでホバー時にゆっくり色が変化するボタンのつくり方

CSSだけで、ホバーしたときに、ふわっと色が濃くなるボタンのつくり方を紹介します。

サンプル

マウスオーバーすると、グレーから黒へふわっと色が変わります。

html

<a href="#" class="sample-btn">BUTTON</a>

CSS

.sample-btn{
  display:inline-block;
  background:#000;
  padding:10px 20px;
  text-align:center;
  color:#fff;
  text-decoration:none;
  opacity: 0.7;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.sample-btn:hover{
  opacity: 1;
}

ホバーしていない通常時に、背景色を黒色（#000）、opacityを0.7を指定して、ややグレー色のボタンを作ります。

ホバー時に、opacityに1を指定すると、透過効果がなくなり、背景色の黒色が表示されます。

ホバーしていない通常時にtransitionプロパティを加えることで、ホバーしたときのアニメーションの効果をつけることができます。上記の例では、0.3秒かけて、ゆっくり変化するように指定しました。

opacityの数値を変えることで、上記とは逆に濃い状態から薄い色へ変化させることもできます。