ブログデザイン備忘録 ~ボタンへのエフェクト追加

1. ボタンへのエフェクト追加

　前回の取り上げたボタンのデザインに続いて今回はボタンに動きなどエフェクトを加える方法を紹介する。前回と同様にはてなのデザインCSSは使用せず、個別の記事にHTML/CSSを適用するため<div>～</div>などのタグで囲い、CSSはタグ内のstyleで指定しインラインで記述する。

atatat.hatenablog.com

2. エフェクトの追加方法

ボタンなどマウス等の操作に反応させてエフェクトを加える方法としては、通常のCSSの記述であれば疑似要素を用いてスタイルを記述していけばよい。例えば前回取り上げた枠線のみのシンプルなボタン（下）でマウスオーバーしたときに白黒反転させるためには、CSSを以下のように記述する。

ボタン

<div><a href="#" class="btn">ボタン</a></div>

.btn{  /*ボタンのデザイン*/
display:block;
position:relative;
width:160px;
text-align:center;
text-decoration:none;
color:black;
background: white;
border:1px solid black;
}
.btn:hover{  /*マウスオーバー時のデザイン*/
background:black;
color:white;
}

疑似要素である:hoverによるマウスオーバー時のみhover内のデザインに切り替わることでボタンにエフェクトを加えることができる。(本記事では動作しない) はてなの記事中に個別に挿入するためにはhtmlのタグ内にインラインで記述することになるが、疑似要素については無効のようだ。(いろいろ調べたり、試した結果） そこでJavaScriptのイベントハンドラを用いることで:hoverに相当する動作を実現する。 マウスオーバーしたときに白黒反転するボタンでは

<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmouseover="this.style.background='black';this.style.color='white'"onmouseout="this.style.background='';this.style.color='black'">ボタン</a></div>

ボタン

前半はボタンのデザインの設定につづいてonmouseover="this.style.プロパティ1='値1';this.style.プロパティ2='値2'"と記述するとマウスオーバーしたときにプロパティとその値になるようにデザインが変化する。複数のプロパティを設定する場合は;を間に置く。またプロパティの値はシングルクォテーションで囲い、プロパティ全体をダブルクォテーションで囲う。白黒反転させるためにはonmouseover="this.style.background='black';this.style.color='white'"とすればよい。ただしこのままだとマウスをずらしても元に戻らない。そこでマウスがはずれた場合のスタイルを指定する必要があり、つづけて onmouseout="this.style.background='';this.style.color='black'"とすればマウスがはずれたときに元のデザインに戻る。:hoverを使えばもとに戻ったときのスタイルを指定する必要がないので、こちらの方が記述としては冗長になってしまうという欠点はある。

3. ボタンへのエフェクト例

上のマウスオーバー時の反転以外のエフェクト例を以下に示す。

色を薄くする

<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background: #795548;border:1px solid black;"onmouseover="this.style.opacity=0.8;this.style.color='white'"onmouseout="this.style.opacity=1.0">ボタン</a></div>

ボタン

opacityの値を変化させる。

影を加える

<div><a href="#" style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background:midnightblue;border:1px solid black;border-radius:5px;"onmouseover="this.style.boxShadow = '3px 4px 10px 3px rgba(0, 0, 0, 0.4)'" onmouseout="this.style.boxShadow='none';">ボタン</a></div>

ボタン

影を設定するプロパティであるbox-shadowでは認識しない。ハイフンを除いて、最初の文字を大文字にしたthis.style.boxShadow='値'とすることで認識させることができる。

動きを加える

<div><a href="#" style="display:inline-block;position:relative;width:160px;text-align:center;text-decoration:none;color:white;background: #F1322C;border-bottom:4px solid #AD2022;border-radius:4px;"onmouseover="this.style.background='#AD2022';this.style.transform='translate3d(0, 4px, 0)';this.style.borderBottom='none'"onmouseout="this.style.background='#F1322C';this.style.transform='translate3d(0, -4px, 0)';this.style.borderBottom='4px solid #AD2022'">ボタン</a></div>

ボタン

動きを加えるにはtransformを利用する。上下左右方向のうち下に動かすにはthis.style.transform='translate3d(0,-4px,0)'とする。また下の境界線を設定するには、通常border-bottomだが影の設定と同様にthis.style.borderBottom='none'と記述する。

ゆっくりと縮小する

<div><a href="#" style="display:block;position:relative;width:50px;height:50px;line-height:65px;text-align:center;text-decoration:none;color:#1E90FF;background:#E4FF8D;border-radius:50%;"onmouseover="this.style.transform='scale(0.8,0.8)';this.style.transition='transform 1s'"onmouseout="this.style.transform='scale(1.0,1.0)'"><i class="fas fa-power-off fa-2x"></i></a></div>

縮小または拡大もtransformを利用してthis.style.transform='scale(0.8,0.8)'とする。またtransitionにより動作時間を指定することができる。1秒間で動作させるにはthis.style.transition='transform 1s'とする。

クリック時に動作

マウスオーバーではなくクリック時に動作させるにはonmouseover=の代わりにonclick=を用いる。クリック時に白黒反転させるには次のように記述する。

<div><a  style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onclick="this.style.background='black';this.style.color='white'">ボタン</a></div>

ボタン

クリック中に動作

クリック中に動作させるにはonmousedown=とonmouseup=を用いることで疑似要素:activeに相当する動作をさせる。上と同じくクリック時に白黒反転させる。

<div><a   style="display:block;position:relative;width:160px;text-align:center;text-decoration:none;color:black;background: white;border:1px solid black;"onmousedown="this.style.background='black';this.style.color='white'"onmouseup="this.style.background='white';this.style.color='black'">ボタン</a></div>

ボタン