CSSでボタンに効果をつけよう

今回は作成したボタンに効果を付けていこうと思います。

ボタンの効果は主に、カーソルをボタン上に乗せた時の効果とボタンをクリックした時の効果があります。
この効果は、JavaScriptやjQueryといった言語を使って実装されることが多いですが、CSSだけでも再現可能です。

今回は、すでに学習しているCSSを使ってボタンの効果を出してみましょう。

共通のHTML

まず、ボタンの効果を作るうえでindex.htmlにサンプルボタンとして共通のHTMLを用意します。

<button type="button">サンプルボタン</button>

上のHTMLコードを打ち、シンプルなボタンを作成しておきましょう。

ホバーエフェクト

シンプルなボタンが作成できたら、早速ボタンに効果をつけていきましょう。
HTMLは用意されているので、後はCSSを打ち込んでいくだけです。

ホバーエフェクトは、カーソルがボタンの上に乗ったときにボタンの一部が変化する効果です。

ボタン色の変化

ホバーエフェクトでボタン色を変化させてみましょう。
例えば背景が青いボタンで、ホバーエフェクト時に黒く変化させてみます。

少しだけふわっと変化するおしゃれなボタンができました。

button{
 background-color:blue;
 trantision:0.5s;
}

button:hover{
 background-color:black;
}

コードは上記のようになります。

➀ buttonのbackground-colorを青、color（文字色）を白に設定します。
② transitionを0.5s（0.5秒の意味）とします。この数字は自由に変えることができます。transitionは効果が適用される時間で、これが短いとスピーディな変化に、長いとふわっとした効果になります。
③ button:hoverを追加します。セレクタに:hoverを付け足したものが、ボタンの変化後のCSSになります。
ここにbackground-color:blackを指定すると、ホバーエフェクトで背景が黒になります。
（文字色など変化の無いものは:hoverで改めて書く必要はありません。変化させたい部分だけCSSの記入をしていきます。）

ボタンを透けさせる

次はホバーエフェクトでボタンを透けさせてみましょう。この効果はかなり主流になっており、多くのサイトのボタンエフェクトで見ることができます。

button{
 background-color:blue;
 trantision:0.5s;
}

button:hover{
 opacity:0.6;
}

コードは上記のようになります。

buttonセレクタのCSSは特に変えなくて大丈夫です。
ボタンを透けさせる場合には、button:hoverにopacityを指定します。
opacityは透明度のことで、デフォルト1.0で0.0に近づくほど透明になっていきます。
ここでは0.6としていますが、数字を変えて試してみてください。

クリックエフェクト

カーソルをボタン上に乗せた時に効果が発動するホバーエフェクトについて説明してきましたが、次はボタンをクリックした時にボタンが変化するクリックエフェクトについて説明していきます。

ボタン色や透明にする変化

ボタンをクリックした時に、ボタンの色が青色から黒色へ変化する効果をつくってみます。

サンプルボタン

button{
 background-color:blue;
 trantision:0.8s;
}

button:active{
 background-color:black;
}

コードは上記のようになります。

クリックエフェクトを作りたい場合は、セレクタに:hoverではなく、:activeを付け加えます。
それ以外は、特にホバーエフェクトの時と変わりがありません。

ボタンをへこませる

クリックした時にボタンがへこむ、まさに本物のボタンのような効果を作っていきましょう。

サンプルボタン

button{
 background-color:blue;
 box-shadow:3px 3px 3px 1px black;
}

button:active{
 box-shadow:none;
 position:relative;
 top:3px;
 left:3px;
}

コードは上のようになります。

➀ buttonにbox-shadowを追加します。box-shadowは要素に影をつけることができます。
4つの数字と色が並んでいますが、左から水平方向の距離垂直方向の距離ぼかし距離広がり距離影の色
となります。
② 変化後のCSSを書いていきます。まず、影を消すためにbox-shadow: none;を指定します。
noneはCSSを無効にするという意味です。noneはよく使われるので覚えておいてください。
③ potision:relative top: left:　を追加します。position:relativeは現在の要素の位置を基準にするという意味で、topとleftを数値指定することによって、その数値分今の位置から動かすことができます。
今回は縦横3pxの影をつけているので、3px分動かしてボタンがへこんだようなアニメーションをつけていきます。