ボタンのマウスオーバー時に「hover.css」で動きをつける!

ボタンのマウスオーバー時に「hover.css」で動きをつける!

 

お問い合わせボタンや各ページへのリンクボタンなどに対して、マウスオーバーした時に何かしらのアクションを付けて置くことで、ユーザー側としては少し安心感を得られます。背景色も変わらなければテキストカラーも変わらないとなると、「これはボタンなの?押して大丈夫?」という、ちょっとした不安感に襲われてしまう心理が少なからず私にはあります。

 

ここはリンクですよ!という表現として、テキストにアンダーラインが引かれていて、マウスオーバーでテキスト色が変わるという仕様がかつては一般的でしたが、いつの間にやらアンダーラインは消え、直感的にボタンだとわかるように背景色が付き、マウスオーバーで背景色が変わるというデザインが主流になっていました。そして今では、色が変化するという仕様に加え、ボタン自体が何かしらの動きを備えて、クリックを誘導するようにしてあるものが数多く見られます。

 

そこで、今回はCSSだけでマウスオーバーした時の動きを表現するのに、とても便利な「hover.css」というものがありましたのでご紹介致します。

 

DEMO

 

▼こちらを参考にさせて頂きました。

 

それでは使い方です。

 

1.hover.cssをダウンロード

hover.cssにアクセスし、「Download on GitHub」をクリック。

hover.css

「Download ZIP」から「hover-master.zip」をダウンロードし解凍します。

hover_2

 

2.hover.cssを読み込む

hover.css」もしくは「hover-min.css」をHTMLに読み込みます。

 

3.HTMLを記述

サンプル用のHTMLは、下記のようになっています。
(ボタンの色やテキスト色を大元のサンプルからは、変更しています。)

 それぞれ動きを指定したい要素、ここでは<li>要素にクラス名「grow」などのように指定します。サンプルを見ながら、お好きな動きを選んでそのまま「同じ名前のクラス名」を対象となる要素のクラス名に記述すればいいでしょう。

ボタンの色や大きさなどは別で指定すればカスタマイズも可能ですので色々手を加えて自分好みのボタンを作成してみてください。


 

タイトルとURLをコピーしました