【CSS】マウスオーバーでボタンを押したように沈むアニメーション

こんにちは、Ryohei（@ityryohei）です！

マウスオーバーでボタンを押したように沈むCSSアニメーションのご紹介です。

「続きを見る」「詳細を見る」「詳しくはこちら」のリンクや送信ボタンにマウスカーソルを乗せるとボタンがぺこっとへこんで実際に押したように見えるアニメーションをご覧になったことがあるかと思います。実際に押しているように見えるためユーザーにも優しいですし、動きがついているため、つい押したくなりますよね。

見たことがない方もいらっしゃるかもしれませんので、簡単ですがデモを用意しました。下記の「Hover Me!」と表示されたボタンにマウスカーソルを乗せてみてください。

See the Pen
Hover Animation7 | CSS by ryoy (@intotheprogram)
on CodePen.

いかがでしょうか。

「Hover Me!」と表示されたボタンにマウスカーソルを乗せると実際にボタンを押したような動きをしたかと思います。デモではボタンの背景や文字の色も一緒に変更していますが、工夫次第で色々な変化を持たせることができます。

本記事では、デモでお試しいただいたアニメーションの実装方法を詳しくご紹介していきたいと思います。

では、解説していきます。

HTMLでボタンを作成する

まずは基本となるボタンの要素をHTMLで作成します。簡単なもので大丈夫です。

下記ではbuttonタグを使用していますがaタグや他のタグに変更していただいても構いません。

HTML

<button>Hover Me!</button>

作成したボタンにスタイルを定義する

続いて上記で作成したボタンにCSSでスタイルを定義していきます。（デフォルトで当たっているスタイルのリセットは省いております。）

下記ではbuttonタグにスタイルを定義していますが、実際に使用される場合は、作成した合わせてセレクタを適宜変更していただければと思います。

CSS

button {
  display: block;
  width: 300px;
  height: 70px;
  margin: 40px auto 0;
  color: #fff;
  font-size: 1.5em;
  background: #007db9;
  box-shadow: 0px 5px 0 #000;
  transition: .3s;
}

button:hover {
  transform: translate3d(0, 5px, 0);
  color: #007db9;;
  box-shadow: none;
  background: #fff;
}

スタイルを定義する際は下記のポイントを押さえていただき、お好みのスタイルを作っていただければと思います。

• box-shadowやborderで影のようなスタイルを定義する
• :hover時にbox-shadowやborderのスタイルをリセットする
• ボタンをへこませる処理はtransformのtranslateを使用する

本記事の内容をすべて記述すると、下記のようなアニメーションが完成します。

See the Pen
Hover Animation7 | CSS by ryoy (@intotheprogram)
on CodePen.

良い感じに仕上がっていますね！

最後に

本記事ではマウスオーバーした際にボタンを押したように沈むアニメーションをご紹介させていただきました。

ボタンをマウスオーバーした際の挙動はインターネットで検索すればたくさんの優良な記事が出てくるかと思います。私も日本の記事だけではなく海外の記事も含めて検索をしますが、素敵なアニメーションが多数公開されていて、いつも参考にさせてもらっています。

Webは日々進歩していってますので、色々なテクニックを吸収して素敵なアニメーションを作成していきましょう。

以上、マウスオーバーでボタンを押したように沈むCSSアニメーションのご紹介でした！