CSS でボタンを hover した時だけ内側にボーダーを付ける方法

hover した時に ボーダーを付けるには hoverする前の状態にもボーダーを付けておく、というのが通常の方法だと思うのですが、グラデーションボタンなどの場合はボーダーが浮いてしまうことに。
解決方法は色々あると思うのですが、その1つとしては内側に span と加えてoutline & outline-offset を使う方法。

HTML

<a href="#" class="button"><span>ボタン</span></a>

CSS

.button {
	transition: all 0.3s;
	display: inline-block;
	text-decoration: none;
	background: linear-gradient(to left, red, blue);
	color: #fff;
}
.button:hover {
	color: blue;
	background: linear-gradient(to left, #fff, #fff);
}
.button span {
	padding: 1em 3em;
	display: inline-block;
}
.button:hover span {
	outline: 3px solid blue; //ポイント！
	outline-offset: -3px; //ポイント！
}