opacityを使ったボタンのhover時の動作

どうしてもボタンに画像を使いたい！　さらにボタンのhover時の見た目を変えたい！

そんな時皆様ならどうやって作りますか？

もちろん！テキスト画像置換をする時にチェックしたいことで紹介された方法もありますが、今回はOpacityを使った方法を紹介します。

そもそもopacityってなぁに？

opacityとは、要素の不透明度（透明度）を指定するもの。
イメージがわきにくい方も居るかもしれないので、実際に不透明度を変えてみましょう。

css

img {
    filter:alpha(opacity=40); /* 0～100の値を指定　（例：40）  ※IE8以下用*/
    opacity:0.4; /* 0～1の値を指定　（例：0.4）*/
}

たったこれだけの指定で、半透明にも透明にもできるんです！わお！

実際にボタンのhoverでどう使うの？

結局どうやって使えば良いのか、簡単に解説していきます。

css

a {
    display:block;
    width:ボタンの幅;
    height:ボタンの高さ;
    background:url( hover時の画像URL ) no-repeat 0 0;
}
a:hover img {
    filter:alpha(opacity=0);
    opacity:0;
}

html

1	`<a` `href="#"><img` `src="ボタン画像のURL"` `alt="ぼたん"></a>`

まずaタグをブロック要素にします。次に実際のボタンと同じ幅・高さを指定して、背景画像にhover時の画像を指定しておきます。
後は簡単！
hoverの時のimgタグ（ボタンの画像）をopacity（不透明度）を使って消し去れば…

背景が見えるって寸法だ！！！

背景画像がなくてもそれっぽく見える

背景画像を使う方法を例にだしてみましたが、opacityだけでも下の様にhoverを作ることができます。

css

a {
    display:block;
    width:ボタンの幅;
    height:ボタンの高さ;
}
a:hover img {
    filter:alpha(opacity=70);
    opacity:0.7;
}

※ただし不透明度を変えただけなので、背景色（背景画像）が後ろにあると見え方が変わってくるので注意

OMAKE！

opacityをつかって遊んでみた。

やまぱん

この記事は
やまぱんが書きました。

入社2007年

出身地千葉

スキル昆虫採集・生き物の知識・揚げ足

今日のひとこと：サイの角は角質なんだって！