ボタンを作成する時ですが、CTA(call to action)の観点からマウスでホバーする時に何らかの変化をつけるのが一般的です。よく見かけるのが、ホバーすると透過度を70%(ocasity: 0.7;)などにして、カラーを薄くするケースです。最近は何も変化させないケースは見たことがないです。
また、下記のように色を反転させるケースもあります。
通常時は背景が青色、文字は白色。ホバー時には逆に背景が白色、文字が青色にしたいとします。通常時にはboderはつけないで試してみます。ホバー時の反転の時にはボタンの背景が白くなるのでborder(例:青枠)をつけます。その場合、ホバー時に青枠分だけ大きくなってしまいます。通常時にはなかったborderが足されてしまうためです。

上記の状況だと、ホバー時にガタついてしまいます。それを防ぐためにどうすればいいか?
ホバー前の通常時にも下記コードを追加しておきます。
border: 1px solid transparent;
ボーダー時に青色にしてもいいのですが、後から色違いのボタンを作成しても問題ないようにtransparentを使うケースが多いようです。
ホバー時にはborder-color: currentColor;にしておきます。これでガタつきがなくなります。



投稿者

Kの手習い

前職はOA機器の販売営業でしたが、退職して、50代で1からプログラマーを目指します。一般的にこの年齢からは厳しいと言われておりますが、この歳ならではの経験を活かして、頑張ります!

コメントを残す