要素の外枠を表示するプロパティとしてバリバリ活躍するborderに比べoutlineは地味なプロパティですが、ここぞという時に大活躍します。

マウスオーバー（hover）した時に枠線の太さを変えたい時、枠線をborderで指定していると周りの要素をガクッとずらしてしまいますが、ボーター領域を作らないoutlineで指定すると、全体のデザインを崩すことなく綺麗にマウスオーバー（hover）時の動作を表現してくれます。

See the Pen Button Hover Effect -Border Transitions by Basilico (@Basilico) on CodePen.

Button-3の走るように枠線の上をなぞっていく太線は疑似要素の枠線です。縦横0ピクセルの二つの疑似要素に透明に設定した3pxの太い枠線を持たせ、マウスオーバーした時に、::beforeは上線と右線を、::afterは下線と左線を黒にしています。と同時に、これら二つの疑似要素のwidthとheightを時間差で０から100%に引き上げることによって線が順次伸びているという仕掛けです。「時間差」がポイントです。

Button-4はSVGで枠線を描いています。破線の間隔を指定するstroke-dasharrayとその起点を指定するstroke-dashoffsetを調整して線が走るようなアニメーションにし、動きをcubic-bezierで指定しています。

少々とっつきにくいcubic-bezierですが、”cubic-bezier.com“というサイトはおすすめです。好みの動きを設定すると数値を算出してくれるツールを公開しています。使い方は簡単ですぐに馴染めます。

表示されているButton-5の枠線は、実は1px幅の細長い四つの疑似要素の組み合わせです。それぞれの疑似要素を時間差でwidthもしくはheightを100%から0に変化させています。

Button-6の外枠は::beforeと::afterで作っています。hover時に、::beforeを左に、::afterを右に動かしつつ、消え入るようにtransitionで設定しています。

光彩を放つButton-7は、疑似要素の::afterで仕掛けています。z-indexで予め下に隠しておいた疑似要素をhoverすることで背景色を白く、縦横幅を1.5倍に、そしてopacityで透明に、という変化を1秒かけて行うように設定しています。