ホバーアニメーションの例
今回は、前回ご紹介したホバーアニメーションの例を実際にいくつかご紹介します！
シンプル、かつ、使いやすそうなデザインのアニメーションをピックアップしてみました。
早速見ていきましょう！
- ボタンを押すようなアニメーション
- ボタンが浮き上がるようなアニメーション
- ボタンにグラデーションがかかるアニメーション
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()でほんの少し下にずらすことで、ボタンを押したように見せています。
まとめ
- ボタンを押すようなアニメーション
- ボタンが浮き上がるようなアニメーション
- ボタンにグラデーションがかかるアニメーション
の3つをご紹介しました。
気になるものはあったでしょうか？
もしあったという方は、導入を検討されてみてはいかがでしょうか。
次回は、見出しのデザインの例をいくつかご紹介します！