CSSで実装するボタンホバー時のボーダーアニメーションエフェクト - NxWorld

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 .button { position: relative; display: inline-block; padding: .5em 4em; border: 2px solid #fff; color: #fff; text-align: center; text-decoration: none; outline: none; transition: all .3s; } .button::before, .button::after { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 2; content: ''; transiti

[kathew]

おしゃれ！

[amautt]

]

[japanitnt]

CSSで実装するボタンホバー時のボーダーアニメーションエフェクト | NxWorld:…

[masayoshinym]

”ボタンホバー時のボーダーアニメーション”