CSSで動く :hover :active :focus の使い方

ボタンを触って動作確認をしてみてください!

左のボタンは  :hover  なので、マウスカーソルをボタンの上に載せてあげましょう。ボタンが回転したのがわかると思います。

 :hover  の後の記述をみてみましょう。transform:rotateY(360deg);でボタンを回してあげています。

真ん中のボタンは  :active  なので、ボタンをクリックしてから離した時の動きをしています。

 :active の後の記述をみてみましょう。box-shadow: 0 0 2px rgba(0, 0, 0, 0.35); border-bottom: none;

ボーダーのシャドーを無くしていることがわかります。

右のボタンは :focus なのでクリックした時に変化するようになっています。

ちょっと試してもらいたいのですが、ボタンをクリックしたあとにボタン以外の場所を押すと元に戻ると思います。

 :focus の後の記述をみてみましょう。こちらも  :hover と同じようにtransform:rotate(10deg);で

要素を動かしていることがわかりますね!

3つとも使いやすく、ちょっとボタンに動きを出したい時は便利です。ぜひ、参考にしてみてください。

カテゴリー: CSS

コメントを残す

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