BLOG

ブログ

技術者Kのデザイン道場
6.ホバーアニメーションの例

ホバーアニメーションの例

今回は、前回ご紹介したホバーアニメーションの例を実際にいくつかご紹介します!

シンプル、かつ、使いやすそうなデザインのアニメーションをピックアップしてみました。

早速見ていきましょう!

  1. ボタンを押すようなアニメーション
  2. ボタンが浮き上がるようなアニメーション
  3. ボタンにグラデーションがかかるアニメーション
1. ボタンを押すようなアニメーション
Focus Here!

まさしく、ボタンを押したことが分かるアニメーションです。

マウスカーソルを当てたことが一目で分かりやすいという特徴があります。

2. ボタンが浮き上がるようなアニメーション
Focus Here!

浮き上がって影が見えるようなアニメーションです。

先ほどのものと比べると、さりげない印象を与えます。

無彩色で配色すると、高級感や上品さを印象付けられます。

3. ボタンにグラデーションがかかるアニメーション
Focus Here!

カーソルを当てると、ボタン全体にグラデーションがかかります。

こちらはマウスカーソルを当てたことが分かりやすいだけでなく、

グラデーションのかけ方によって様々な雰囲気を表現できます。

どうやって実装しているの?

今回は、「1. ボタンを押すようなアニメーション」をご紹介します。

/* HTML */
<a class="pushdownbox">Focus Here!</a>

/* CSS */
.pushdownbox{
  display: block;
  width: 80%;
  max-width: 250px;
  padding: 1em;
  border: 2px solid #2E2B2B;
  border-bottom: 8px solid #2E2B2B;
  border-radius: 5px;
  margin: 30px 0;
  color: #2E2B2B;
  text-align: center;
  text-decoration: none;
}

.pushdownbox:hover{
  border-bottom: none;
  border: 2px solid #2E2B2B;
  transform: translateY(5px);
  cursor: pointer;
}

ボタン押下前の影はborder-bottomで表現しています。

hoverした際に、translateY()でほんの少し下にずらすことで、ボタンを押したように見せています。

まとめ

  1. ボタンを押すようなアニメーション
  2. ボタンが浮き上がるようなアニメーション
  3. ボタンにグラデーションがかかるアニメーション

の3つをご紹介しました。

気になるものはあったでしょうか?

もしあったという方は、導入を検討されてみてはいかがでしょうか。

次回は、見出しのデザインの例をいくつかご紹介します!

お問い合わせはこちらから

お問い合わせ