押したくなるボタンとは
「これリンクだな」と押してもらえそうなボタン。
スマホでもパソコンでも、リンクが大きいと押しやすくて便利なので使っています。
特にパソコンサイトでは、マウスホバーしたときに押してる感があると楽しい気がします。
見た目
HTMLとCSSをタップすると、ボタンを構成するコードを見られます。
Resultをタップすると、ボタンの見た目を確認できます。
See the Pen
Untitled by meri96bockn (@meri96bockn)
on CodePen.
特徴
押せる感を出す→影をつけて浮き上がらせた
ぬるっと感を出す→マウスホバー時に0.3秒かけて変化させた
押し戻された感を出す→マウスホバーを外したときもぬるっと元のスタイルに戻した
HTML
<a href="#">ボタン押せるよ</a>
<a href="#">Push this button!</a>
<a href="#">押した？</a>
見本として、必要最低限の要素のみ記述しています。
CSS
/*マウスホバー前のスタイル*/
a {
display: block;
text-decoration: none;
text-align: center;
width: 160px;
margin: 24px;
padding: 16px;
border-radius: 8px;
color: rgb(255, 255, 255);
background-color: rgb(85, 197, 0);
box-shadow: 8px 4px 1px rgba(0, 0, 0, .6);
transition: .3s;
}
/*マウスホバー後のスタイル*/
a:hover {
background-color: rgba(85, 197, 0, .9);
box-shadow: none;
transform: translate(4px, 2px);
}
マウスホバー前
display: block;
aタグをブロック要素にします。
aタグは本来インライン要素として機能していますが、
ブロック要素に変えることで適用できるスタイルがあります。
例えばtransitionを適用できます。
これが効くと、マウスをかざしたときに要素の色をゆっくり変化させたり、移動させたりできます。
ほかにもpaddingを適用できます。
aタグ自身の領域を大きくすれば、マウスをかざせる範囲が広がりボタンを押しやすくできます。
text-decoration: none;
aタグの下線を消します。
「押せるボタン＝リンクだ」と伝わることを想定した判断です。
ただし、「下線＝リンクだ」という認識もあるので状況によって選びます。
今回は、情報量が増えると分かりづらいので省きました。
text-align: center;
aタグ内の文字を真ん中に持っていきます。
width: 160px;
aタグをブロック要素に変えると、widthが目一杯広がってしまいます。
そのためwidthに具体的な値を指定して、ちょうどいい幅にします。
margin: 24px;
3つのaタグがそれぞれくっつかないように、余白を設けます。
padding: 16px;
文字のまわりに肉付けして、aタグの領域を広げます。
領域は、このあと指定するbackground-colorの色になります。
前述したように、aタグの領域が広がるとボタンが押しやすくなります。
border-radius: 8px;
aタグの領域の角を丸くしています。
color: rgb(255, 255, 255);
aタグの文字色を指定しています。
background-color: rgb(85, 197, 0);
aタグの背景色を指定しています。
前述したpaddingの大きさによって、この色がどれくらい広がるか決まります。
box-shadow: 8px 4px 1px rgba(0, 0, 0, .6);
aタグに四角い影をつけています。
影がつくことで、「押せると分かる」見た目になります。
8px：aタグのよこ(X軸)方向に影を広げます。
4px：aタグのたて(Y軸)方向に影を広げます。
1px：数字が大きいほど、影がぼんやり広がります。
rgba(0, 0, 0, .6)：影の色を指定します。.6＝0.6は透明度です。
透明度を上げるには、値を小さくします。（=色が薄くなる。）
その度合いによって影の濃さが決まります。
背景色が濃いほど透明度を上げ、背景色が薄いほど透明度を下げるとしっくりきました。
transition: .3s;
マウスホバー前からマウスホバー後へ、なにをどのように変化させるか定義します。
.3s＝0.3sは「0.3秒の時間をかけて指定したプロパティーを変化させる」という指定です。
これは「どのように」にあたる部分です。
一方「なにを」にあたる部分は、マウスホバー後のプロパティーから指定します。
今回はbackground-color、box-shadow、transformと3つあり、
これらすべてを0.3秒かけて変化させたいです。
そのため具体的なプロパティー名の代わりに、allと指定したいところですが、
そもそもtransitionの「なにを」にあたる初期値はallなので、
わざわざ記述する必要はありません。
結果、transitonに.3sと記述するだけですべてのプロパティーが0.3秒かけて変化します。
マウスホバー後
a:hover
aタグに:hoverと追記し、マウスをホバー（かざした）ときのスタイルを指定する。
background-color: rgba(85, 197, 0, .9);
マウスホバー前との違いは最後の.9の部分です。
背景色の透明度を少し上げることで色を明るく見せ、
ボタンを選択していることが伝わるようにしています。
box-shadow: none;
ボタンの影を消します。
同時に後述のtransformで要素を移動することで、
「ボタンを押し込んでいる」感じのスタイルにします。
transform: translate(4px, 2px);
transformは要素を回転させたり移動させたりできます。
そこにtranslateと追記し、aタグを移動させます。
さらに()内に値を2つ追記すれば、よこ(X軸)方向とたて(Y軸)方向にどれだけ移動するか指定できます。
今回はマウスホバー前のbox-shadowで指定した値に対し、半分の値を指定します。
影と同じ値だけ移動させた場合、ボタンが深めに沈んでしまい不自然で大袈裟でした。
影の値に対し、半分くらいの移動がしっくりきます。
↧