マウスホバー（マウスが対象の上にのったとき）時に変化をつけるホバーボタン。キーボードアクセシビリティを考えると:focusも同様に書いておくべきですが、冗長になるので今記事の説明では:hoverのみ書いています。
cssでの記述は
対象要素:hover{
/*ここにホバー時のcss*/
}
対象要素:focus{
/*ここにフォーカス時のcss*/
}とするだけです。
transitionやanimationで変化にアニメーション効果をつける場合は、:hoverに書くのではなく、元の要素に指定します。注意。
よく使われるのは、background(背景) ・transform(変形)プロパティ。filterプロパティも便利です。擬似要素を使ったりsvgもよく見られますね。
今回はホバーボタンのサンプルと簡単な解説を交えてご紹介します。
背景が変化するホバーボタン
一番シンプルな背景色が変化するボタン
#{
background-color: tomato;
}
#:hover{
background-color: navy;
:hover で背景色を指定するだけでOK。
スライド式に背景色が入れ替わる
backgroundを使うやり方と、擬似要素を使う方法があります。
まずはbackground
#{
background:linear-gradient(to left,navy 100%, transparent) no-repeat left,tomato ;
background-size: 0% 100%;
}
#:hover{
background-size: 100% 100%;
}backgroundプロパティは
- background-color (tomato)
- background-image(linear-gradient)
- background-repeat (no-repeat)
- background-position (left)
- background-size (0% 100%)
などを一括指定できるショートハンド型です。background-sizeだけ別に書いているのは、そうしないとアニメーション効果が出ない為です。
bg-imageは bg-colorよりも上になるので、ホバー前はbg-sizeで非表示に。ホバー後に表示させています。
続いては擬似要素。動きは先程と同じです。
#{
background-color: tomato;
position: relative;
overflow: hidden;
}
#::after{
content: "";
display: block;
width: 100%;
height: 100%;
background: navy;
position: absolute;
top: 0;
left: -100%;
transition: 1s;
}
#:hover::after{
transform:translateX: 100%;
}同じ大きさの疑似要素を作り、positionで要素外にしてoverflow:hiddenで隠す。
マウスホバーで擬似要素を動かす。動くのは擬似要素なのでtransitionも擬似要素に指定します。
ボタン変形型
transformプロパティを使えば「移動・ゆがみ・回転・拡大縮小」など簡単にできます。詳しくは「transformプロパティ（変形）まとめ」にて。
下は以前作ったサンプルですが。「linear radial slide」以外はtransformプロパティです。コードも見られるのでご参考ください。
See the Pen hover button by Takashi Abe (@TakeshiAbe) on CodePen.
filterによる変化
グレースケールやセピア効果、ぼかしなどグラフィック系の変化をつけられるfiletrプロパティ。
詳細は「filter プロパティ」にて。
#:hover{
filter: sepia(0.7);
}
#:hover{
filter: blur(3px);
}
#:hover{
filter: drop-shadow(10px 10px 10px maroon);
}SVGを使うホバーボタン
svgは図形やテキスト描画につかうhtml要素。
svgはcssではないですが、いずれこのサイトでもまとめようと思っています。
See the Pen hover button sample by Takashi Abe (@TakeshiAbe) on CodePen.
ホバーアクションはJavaScriptなしでもアイディア次第で色々なものが作れるので挙げていけばキリがありません。
ぜひオリジナルホバーボタンに挑戦してください。
