お問い合わせボタンや各ページへのリンクボタンなどに対して、マウスオーバーした時に何かしらのアクションを付けて置くことで、ユーザー側としては少し安心感を得られます。背景色も変わらなければテキストカラーも変わらないとなると、「これはボタンなの?押して大丈夫?」という、ちょっとした不安感に襲われてしまう心理が少なからず私にはあります。
ここはリンクですよ!という表現として、テキストにアンダーラインが引かれていて、マウスオーバーでテキスト色が変わるという仕様がかつては一般的でしたが、いつの間にやらアンダーラインは消え、直感的にボタンだとわかるように背景色が付き、マウスオーバーで背景色が変わるというデザインが主流になっていました。そして今では、色が変化するという仕様に加え、ボタン自体が何かしらの動きを備えて、クリックを誘導するようにしてあるものが数多く見られます。
そこで、今回はCSSだけでマウスオーバーした時の動きを表現するのに、とても便利な「hover.css」というものがありましたのでご紹介致します。
▼こちらを参考にさせて頂きました。
それでは使い方です。
1.hover.cssをダウンロード
hover.cssにアクセスし、「Download on GitHub」をクリック。
「Download ZIP」から「hover-master.zip」をダウンロードし解凍します。
2.hover.cssを読み込む
「hover.css」もしくは「hover-min.css」をHTMLに読み込みます。
1 |
<link rel="stylesheet" type="text/css" href="css/hover.css" /> |
3.HTMLを記述
サンプル用のHTMLは、下記のようになっています。
(ボタンの色やテキスト色を大元のサンプルからは、変更しています。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<h2>2D TRANSITIONS</h2> <div class="box"> <ul> <li class="buttonA grow">grow</li> <li class="buttonA shrink">shrink</li> <li class="buttonA pulse">pulse</li> <li class="buttonA pulse-grow">pulse-grow</li> <li class="buttonA pulse-shrink">pulse-shrink</li> <li class="buttonA push">push</li> <li class="buttonA pop">pop</li> <li class="buttonA rotate">rotate</li> <li class="buttonA float">float</li> <li class="buttonA sink">sink</li> <li class="buttonA hover">hover</li> <li class="buttonA hang">hang</li> <li class="buttonA skew">skew</li> <li class="buttonA skew-forward">skew-forward</li> <li class="buttonA wobble-vertical">wobble-vertical</li> <li class="buttonA wobble-horizontal">wobble-horizontal</li> <li class="buttonA wobble-top">wobble-top</li> <li class="buttonA wobble-bottom">wobble-bottom</li> </ul> </div> <h2>SHADOW/GLOW TRANSITIONS</h2> <div class="box"> <ul> <li class="buttonB trim">trim</li> <li class="buttonB outline-outward">outline-outward</li> <li class="buttonB outline-inward">outline-inward</li> <li class="buttonB round-corners">round-corners</li> <li class="buttonB glow">glow</li> <li class="buttonB box-shadow-outset">box-shadow-outset</li> <li class="buttonB float-shadow">float-shadow</li> <li class="buttonB hover-shadow">hover-shadow</li> <li class="buttonB shadow-radial">shadow-radial</li> </ul> </div> <h2>SPEECH BUBBLES</h2> <div class="box"> <ul> <li class="buttonC bubble-top">bubble-top</li> <li class="buttonC bubble-right">bubble-right</li> <li class="buttonC bubble-bottom">bubble-bottom</li> <li class="buttonC bubble-left">bubble-left</li> <li class="buttonC bubble-float-top">bubble-float-top</li> <li class="buttonC bubble-float-right">bubble-float-right</li> <li class="buttonC bubble-float-bottom">bubble-float-bottom</li> <li class="buttonC bubble-float-left">bubble-float-left</li> </ul> </div> <h2>CURLS</h2> <div class="box"> <ul> <li class="buttonD curl-top-left">curl-top-left</li> <li class="buttonD curl-top-right">curl-top-right</li> <li class="buttonD curl-bottom-right">curl-bottom-right</li> <li class="buttonD curl-bottom-left">curl-bottom-left</li> </ul> </div> |
それぞれ動きを指定したい要素、ここでは<li>要素にクラス名「grow」などのように指定します。サンプルを見ながら、お好きな動きを選んでそのまま「同じ名前のクラス名」を対象となる要素のクラス名に記述すればいいでしょう。
ボタンの色や大きさなどは別で指定すればカスタマイズも可能ですので色々手を加えて自分好みのボタンを作成してみてください。