マウスオーバー時に少し変化がある事でクリック率を高める事が出来ます。
はじめに
画像などのボタンをマウスオーバー時に簡単な変化を加える事でクリック率を高める事ができます。
注意事項
Opacityを使うのでクロスブラウザ用にカスタマイズしなければいけません
ボタンを作ろう
まずはボタン用のhtmlを用意します。
<a href="#"><img src="画像" class="btn" /></a>
aタグに対して使うのが多い場合もありますが、今回は画像に対して作用させたいので画像にclassをつける形にしました。
cssを使おう
次にcssを作ります。
a:hover img.btn {
opacity:0.8;
filter: alpha(opacity=80); /* IE lt 8 IE8までのバージョン */
-ms-filter: "alpha(opacity=80)"; /* if gte IE 8 IE8以上のバージョン */
-moz-opacity:0.8; /* FireFox */
-khtml-opacity: 0.8; /* Safari */
zoom:1;
}
opacityの0.8や80と出ている数字は透過度80%と言う数字になります。
この数字をいじることでお好みの透過度にする事が出来ます。
サンプルで確認して下さい
透過度のサンプルを作ってみました。
https://www.moco358.com/wp-content/uploads/touka.html
90%から10%までを作ってみました。
さいごに
JavaScriptよりももっと簡単に
マウスオーバー時に少し変化を加えたいがJavaScriptを使用する場合、画像にonとoffを加える場合はon用の画像とoff用の画像を2枚用意しなければいけなかったり、マウスオーバー時に1pxや2pxだけ位置を少し動かしてボタンに動きを加えるタイプもありますが、思ったように画像の位置を動かす事が出来なかったり、レイアウトが変わってしまう場合などもございます。
それに比べて透過系の変化であれば位置を動かすわけでもないのと画像を用意しなくても済むので非常に簡単に導入する事が出来ました。
そして、この透過のcssはよく忘れるのでメモとしてブログにアップしました。
