ボタンのborderにhoverを使ったらずれて表示された話

2021年2月22日

はじめに

「オンマウス時のみ枠線が表示されるボタン」を作る機会があり(さらにボタンの背景をグラデーションで設定)、実装してみるとオンマウス時にborderの幅だけボタンがずれて表示されてしまいました。

その時の解決策を以下にまとめています。

現象の再現

特に何も対策しないと、下のボタンのようにマウスオーバー時に少しずれます。

※ボタンをマウスオーバーして下さい

  • 背景が単色なら同じ色のborderを設定する
  • 背景がグラデーションの場合の設定
  • 幅・高さにpaddingを使う場合の設定

背景が単色なら同じ色のborderを設定する

まずは、参考までに背景が単色の場合の設定です。

当初、box-sizing:border-box;を使えばできるんじゃないか、と思っていたのですが、横幅のずれはなくなりましたが、高さがずれました。

そこで考えたのが、オフマウス時に背景色と同じ色のborderを設定して、オンマウス時に別の色を設定する方法です。

背景が単色ならこれが簡単だと思います。

html

※htmlは以下すべて共通です。
<a href="#" class="test">Button</a>

CSS

.test {
	display: block;
	width: 180px;
	line-height: 50px;
	background: #000;
	color: #fff;
	text-decoration: none;
	text-align: center;
	border: 4px solid #000;
}
.test:hover {
	border: 4px solid #ff0000;
}

できあがったもの

※ボタンをマウスオーバーして下さい

テキスト

背景がグラデーションの場合の設定

背景色がグラデーションで「マウスオーバー時のみ枠線を表示させたい」場合、オフマウス時でもborderが表示されるため、上記の方法では上手くいきません。

「枠線をグラデーションにする」方法もあるのですが、手順が若干面倒です。

私は上記のようなボタンを作成する場合、高さはline-heightで調整しているのですが、その場合、オンマウス時のborderの値に合わせてline-heightを調整すれば、ズレがなくなります。

CSS

.test {
	display: block;
	width: 180px;
	line-height:50px;
	background-image: linear-gradient( to right, #000 , #666);
	color: #fff;
	text-decoration: none;
	text-align: center;
}
.test:hover {
	border: 4px solid #ff0000;
	line-height:42px;
	box-sizing:border-box;
}

上記CSSでは、オンマウス時のborderを4pxで設定しているので、line-heightを4px×2の8px分引いて設定すればOKです。

できあがったもの

※ボタンをマウスオーバーして下さい

幅・高さにpaddingを使う場合の設定

上記では行の高さにline-heightを使用しているのですが、行幅・高さをpaddingで設定する場合は以下のような設定になります。

(幅もwidthではなくpaddingで設定しています)

CSS

.test {
	display: inline-block;
	padding: 20px 40px;
	background-image: linear-gradient( to right, #000 , #666);
	color: #fff;
	text-decoration: none;
	text-align: center;
}
.test:hover {
	border: 4px solid #ff0000;
	padding: 16px 36px;
}

今回は、オンマウス時のpaddingは2倍した値を引かず、1倍の値を縦横それぞれのpaddingから引いています。

できあがったもの

※ボタンをマウスオーバーして下さい