線が描かれるアウトラインボタン
このアウトラインボタンは、4辺を <i> 要素で個別に用意し、ホバー時に上→右→下→左の順で線が伸びていく演出です。各辺は最初 width:0 または height:0 で隠れており、 :hover で 100% に伸長します。
解説
このアウトラインボタンは、4辺を <i> 要素で個別に用意し、ホバー時に上→右→下→左の順で線が伸びていく演出です。各辺は最初 width:0 または height:0 で隠れており、:hover で 100% に伸長します。順番は transition-delay を .25s ずつずらすことで生まれ、まるで一筆書きで枠が描かれるように見えます。背景は透明、ベースに枠線を持たないため、線が描かれて初めて輪郭が完成する構造です。CSS のみで動作します。
合う場面
- ミニマルで上質なポートフォリオの CTA
- 暗い背景に映えるエレガントなナビボタン
- 余白を活かしたブランドサイトのリンク
描画の速さは各辺の transition と delay で決まり、全部短くすれば素早く、長くすれば優雅になります。線の色 #fff を1か所変えれば4辺すべてに反映されます。注意点はホバー前提の演出であること。タッチ端末ではホバーが効きにくいため、フォーカス時にも同じ動きが出るよう :focus-visible を併用すると操作性が上がります。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
線が描かれる順番や速さを変えられますか
順番は各辺に設定した transition-delay（0、.25s、.5s、.75s）で決まります。値を入れ替えれば描き始める辺を変えられ、すべて小さくすれば速く、大きくすれば優雅に描かれます。
スマホのタップでも動きますか
この演出は :hover が前提のため、ホバーのないタッチ端末では再現されにくいです。:focus や :focus-visible にも同じ動きを指定しておくと、タップやキーボード操作でも線が描かれるようになります。