二重ボーダーボタン
このボタンは、本体の border と outline を二重に重ねたクラシックな枠線デザインです。外側の線は outline で描き、 outline-offset で本体から少し離して二重枠に見せています。
解説
このボタンは、本体の border と outline を二重に重ねたクラシックな枠線デザインです。外側の線は outline で描き、outline-offset で本体から少し離して二重枠に見せています。ホバーすると outline-offset が広がり、同時に letter-spacing が広がって文字がふわっと展開します。色やグラデーションではなく、間隔と字間という細やかな変化で上品さを出しているのが特徴で、CSS のみで動きます。
使う場面
- ホテルやレストランの「Reserve」「Book Now」など格式を出したい予約ボタン
- ブランドサイトのフォーマルな問い合わせ導線
- 招待状・イベントページの落ち着いた CTA
枠の間隔は outline-offset の初期値とホバー時の値で決まり、差を大きくすると動きが派手になります。線色は border と outline の #fff を背景に合わせて変えます。outline はフォーカスリングと役割が重なるため、キーボード操作時にフォーカスが分かりにくくならないよう、:focus-visible で別の見た目を足しておくとアクセシビリティ面で安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
二重の枠線はどうやって作っていますか
本体の border に加えて outline を使い、outline-offset で本体から間隔を空けることで二重に見せています。画像や擬似要素を使わず、枠線プロパティの組み合わせだけで実現しています。
ホバーで何が変化しますか
outline-offset が広がって枠の間隔が開き、同時に letter-spacing が広がって文字の字間が伸びます。色は変えず、間隔と字間の変化だけで上品な動きを出しています。