ホバーすると、ベタ塗り→borderに変わるボタンについて
↓こういうボタンを実装する場合、ホバーの前の状態のボタンに、透明なborderを指定しておく。
See the Pen Untitled by mamenon (@mamenon) on CodePen.
ホバー時のみborderを指定してもいいのでは？と思うが、
そうすると、上下左右に2px+2px=4px分のボーダーが追加されてしまうので、
結果として大きいボタンになってしまう。
See the Pen sample1 by mamenon (@mamenon) on CodePen.
これを阻止するために、ホバー前の状態からborderを指定しておく。
ちなみに（ボーダーの色について）
borderの色は、背景色と同じ色（この場合blue）でもいいけど、
後々もしblueが変更になった場合、いちいち書き直さないといけないから、transparentにしている。
:focusについて
:focusを指定すると、フォーカスしたと同時に、ホバーした時と同じ見た目になるため、タブキーを押下してページを遷移させるユーザーにとって、わかりやすくなる。
基本的には :hoverと同時に指定しておく。
参考
「CSS設計完全ガイド ~詳細解説+実践的モジュール集」
https://gihyo.jp/book/2020/978-4-297-11173-1