crnote

1. ボタンの色を変更する

完成形デモ

See the Pen btn hover1_color by crnote (@crnote) on CodePen.

cssの書き方

.btnにtransitionプロパティを設定します。transitionプロパティについて少しご紹介します。

transitionプロパティの記述の仕方は、

transition:　変化の対象　変化の時間　変化の仕方;

となります。

今回は「変化の対象」は全てなので「all」を設定し、「変化の時間」は「.3s(=0.3秒)」を設定しています。

「変化の仕方」の設定には4種類あります。
①ease（初期値）→開始と終了時は穏やかに変化
②linear→開始から終了まで一定に変化
③ease-in→開始時は穏やか、終了時は速く変化
④ease-out→開始時は速く、終了時は穏やかに変化

今回は開始と終了時に穏やかに変化する「ease」を設定しています。

.btnの後ろに「:hover」の疑似クラスを付けて、ボタンにマウスホバーした時の変化を記述します。今回は「background-color」を変更し、ボタンの背景色を変化させています。

2. ボタンの透明度を変更する

完成形デモ

See the Pen btn hover2_color by crnote (@crnote) on CodePen.

cssの書き方

.btn:hoverに「opacity: 0.6;（=不透明度60%）」を設定します。
opacityプロパティは、0.0（不透明度0%）〜1.0（不透明度100%）の数値で設定します。

3. フワッと上に浮き上がる

完成形デモ

See the Pen btn hover3_transform by crnote (@crnote) on CodePen.

cssの書き方

.btn:hoverにtransformプロパティを設定し、要素の表示位置を移動させます。「translateY」はY軸方向（上下）の移動を指定します。
今回は、「transform: translateY(-5px);」を指定し、上方向へ5px移動させます。

また、box-shadowプロパティで、影を設定することでより浮き上がっているように見せることが出来ます。

4. 左から右へボタンの色を変更する

完成形デモ

See the Pen btn hover4_color by crnote (@crnote) on CodePen.

cssの書き方

.btnに「:before」の疑似クラスを用いて、width、heightともに100%の同じサイズの背景色違いのボタンを作成します。
「left:-100%」を設定し、デフォルトでは表示されない設定にします。この時、aタグを囲うdivタグなどに「overflow: hidden;」を設定することではみ出した要素を非表示にすることが出来ます。

.btn:hover:beforeに「left:0;」を指定すると、ボタンの背景色が左から右へ変わります。

5. 上から下へボタンの色を変更する

完成形デモ

See the Pen btn hover5_top to bottom by crnote (@crnote) on CodePen.

cssの書き方

上記「4. 左から右へボタンの色を変更する」と同様に、同じサイズの背景色違いのボタンを作成し、「top:-100%」を指定します。

.btn:hover:beforeに「top:0;」を指定することで、ボタンの背景色が上から下へ変わります。

6. 左右両側からボタンの色を変更する

完成形デモ

See the Pen btn hover6_both sides by crnote (@crnote) on CodePen.

cssの書き方

btnに「:before」と「:after」の疑似クラスを用いて、「height:100%」、「width:0;」の背景色違いのボタンを作成します。
「:before」には「left:0;」、「:after」には「right:0;」を指定します。

.btn:hover:beforeと.btn:hover:afterに「width:50%;」を指定することで、ボタンの背景色が左右両側から変更されます。