よくWebページを見ているとボタンがあり、マウスカーソルをボタンに合わせた時に色が変わるように設定されているものを見かけると思います。
HTMLとCSS（Sass)だけで簡単に実装できますので今回はその方法について紹介しようと思います。
完成イメージ
今回のコードを書くとこのようなボタンが完成します。
通常時は白色の背景色に黒色の文字、マウスホバー時（マウスカーソルをボタンに合わせた時）にはオレンジ色の背景色に白色の文字になります。
HTMLのコード例
<button class="button">ボタン</button>HTMLの該当コード部分としてはこれだけになります。「button」というクラス名をつけて、ここにCSS (Sass）でスタイルを当てていきます。
CSS（Sass)のコード例
今回、Sassという記述方法を使ってCSSを書いていきます。
Sassのコンパイルや環境構築についてはこちらの記事で解説していますので、まだの方はこちらの記事を参考に環境構築してみてください。
.button {
font-weight: 700;
border-radius: 60px;
border: 2px solid #000;
padding: calc(10px - 2px) calc(30px - 2px);
background-color: #FFF;
color: #000;
transition: background-color 0.3s, color 0.3s;
&:hover {
background-color: #E4780C;
color: #fff;
}
}font-weight
こちらでは文字の太さを指定しています。一般的にfont-weight:400;が普通の文字の太さの時に使われることが多く、今回指定しているfont-weight:700;が太字の時に使われることが多いです。
border-radius
こちらではどれだけ角を削るか（丸くするか）について指定しています。今回は60pxを指定していますが、数字が大きいほど、角を削るため円に近づき、数字が小さいほど四角に近い形になります。
border
こちらではボタンの周りの線の太さ（2px）と形状（solid）と色（#000）を指定しています。
2pxの部分を大きい数字にすれば周りの線が太くなります。
今回solidとしてしているのは1本線という意味です。ここに「double」を指定すれば2重線になりますし、「dotted」を指定すると点線になります。他にも色々種類がありますので気になる方は調べてみてください。
最後に色ですが、ここでは自分の好きな色を指定できます。
border: 5px double #43B549;例えばborderを上のコードのように変更するとこのようなボタンになります。
padding
ここでは枠線から文字までの余白を計算しています。
border: 2px solid #000;
padding: calc(10px - 2px) calc(30px - 2px);今回は枠線が描かれている位置から計算するためcalc(10px – 2px)と記述して枠線の太さも考慮しています。余白は縦、横の順で書くので今回の場合だと上下の枠線から文字までの余白が８px、左右の枠線から文字までの余白が28pxとなります。
background,color
ここでは背景色と文字の色を決めています。background-colorで背景色、colorで文字の色を指定しています。
transition
ここではマウスホバー時に何秒かけて背景色、文字色が変わるのかを指定しています。今回であればどちらも0.3秒と指定されていますが、文字の色だけもっとゆっくり変化させたければcolorの部分を1.0sにする等して自分の好きな時間を設定可能です。
&:hover
ここで今回の本題であるマウスホバー時のアクションを設定しています。Sassではマウスホバー時に変化を加えたいクラスに&hover {}と書いて{}の中に変化させたい対象を記述するだけで簡単に実装できます。
今回であれば背景色と文字の色を変化させたいため、background-color,colorが指定されています。
&:hover{}で簡単にホバー時のアクションは設定可能
今回ご紹介したようにマウスホバー時のアクションは&:hoverを使うことで簡単に自分の好きな設定が可能です。少しアニメーションをつけたければtransitionを使えば簡単なアニメーション付きで実装することも可能ですので、是非自分でコードを書いて色々なボタンを作ってみてください。
コメント