少しの作業で大きな効果！
CSSホバーアクションでUXを向上させる

最近では殆どのWEBサイトに、何かしらの動き（アニメーション）が付けられていることが「普通」と言っても過言ではないでしょう。ちょっとした細かな動きであってもユーザーに与える印象は少なからず変わるものです。
JavaScriptを使用することで複雑な動きを付けることもできますが、今回はHTMLとCSSで比較的簡単に実装できる「ホバーアクション」について、ボタンリンクを使って紹介します。テキストリンクに使えるものもありますので応用してみてください。
※スマートフォンでの閲覧はカーソルが無いため、ホバーアクションは上手く動作しません。

「ホバーアクション」とは

ホバーアクションはボタンやリンクによく使われる技法です。ホバーアクションを付与した要素にマウスカーソルを乗せることで、その要素に変化を付けることができます。（ホバー：「空中に停止する」という意味）
それでは、ホバーアクションの付け方を解説します。

ホバーアクションの指定方法

HTMLは特別な記述は必要ありません。
必要なのはCSSの「:hover」という疑似クラスです。
例えばこのようになります。↓↓↓

[該当の要素(クラス)名]:hover {
  変化を付けたいプロパティ（opacity:0.6;等）
}

変化に緩急を付けたい場合は要素に「transition」プロパティを指定します。
今回は「transition: all 0.3s ease;」を指定します。これは「全てのプロパティを0.3秒かけて変化させる」という指定になります。
“all”の部分は特定のプロパティのみ(width等)を指定することもできます。
「:hover」と合わせるとこのようになります。↓↓↓

[該当の要素(クラス)名] {
  transition: all 0.3s ease;
}
[該当の要素(クラス)名]:hover {
  変化を付けたいプロパティ
}

以上がCSSホバーアクションの基本的な記述方法になります。「変化をつけたいプロパティ」を設定することで様々な動きをつけることが可能です。

サンプル：多種多様なCSSホバーアクション

20種類のサンプルを作成しました。全て応用が効くので、お好みでカスタムして使ってみてください。
サンプル＞

まとめ

ちょっとした動きではありますが、ホバーアクションはユーザーにリッチな印象や楽しい印象を与えることができます。ページデザインにマッチしたホバーアクションはユーザーにより良い体験を付加することができます。JavaScriptを使用することなく実装できるCSSホバーアクションは、工夫次第で多彩な動きを比較的簡単に実現できますので、サンプルを活用してUX向上に役立てていただければ嬉しいです。

WEBプログラマー ／ I.S