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

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

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • ホバーしたときに、背景色と文字色が反転する、シンプルなボタンの作り方が知りたい
  • CSSのtransitionプロパティを使い、フワッとアニメーションするボタンを作りたい

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

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

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

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

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

ボタンのサンプル

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

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

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

HTML

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

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

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

CSS

今回のCSSはこちらです。

特徴は、

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

となります。

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

CSS
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】ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です