ホバーしたときに、背景色と文字色が反転する、シンプルなボタンの作り方

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

考えうる限り、最もシンプルなホバーアニメーションつきボタンの実装方法を解説します。

ホバーしたときの動作は、:hover擬似クラスを使って指定することが可能です。

フワッとアニメーションさせるために、transitionプロパティを使うのもポイントとなります。

ボタンのホバーアニメーションで躓いている方のお役に立てれば幸いです。

ボタンのサンプル

こちらCodePenで作ったアニメーションつきのボタンとなります。

実際にホバーしてみて、確かめてみてください。

See the Pen
ホバーで背景色反転ボタン by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

ボタンのHTMLは至ってシンプル。

aタグにBtnというクラスをつけただけのものです。

<a href="" class="Btn">ボタン</a>

CSS

今回のCSSはこちらです。

特徴は、

• ホバー前、ホバー後両方にtransition: .8sでアニメーション速度を指定
• margin-left,rightをautoで指定することで中央寄せ

となります。

ボタン色、文字サイズ、アニメーション速度などはよしなに変更して使ってください。

a{
  display: block;
  text-decoration: none;
}

.Btn{
  border: 1px solid #5bc8ac;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5bc8ac;
  background: #fff;
  font-size: 24px;
  transition: .4s;
}

.Btn:hover{
  color: #fff;
  background: #5bc8ac;
  transition: .4s;
}

まとめ

以上、ホバーしたときに、背景色と文字色が反転する、シンプルなボタンの作り方を紹介しました。

これだけシンプルでも、実際の案件では意外と使用する機会がありますので、ぜひ覚えていきましょう。

ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

コーディングスキルアップシリーズはこちら！