Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1013" type="button"><span>会社案内を見る</span></button>
CSS
.tbx-1013{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:174px;min-height:52px;padding:13px 21px;border:1px solid #c7d6e4;border-radius:3px;background:#fff;color:#18334d;font:650 13px/1.5 system-ui,sans-serif;cursor:pointer;isolation:isolate}
.tbx-1013::before,.tbx-1013::after{content:"";position:absolute;width:0;height:0;pointer-events:none;transition:width .32s ease,height .32s ease}
.tbx-1013::before{top:-1px;left:-1px;border-top:2px solid #317c9e;border-left:2px solid #317c9e}
.tbx-1013::after{bottom:-1px;right:-1px;border-bottom:2px solid #317c9e;border-right:2px solid #317c9e}
.tbx-1013:is(:hover,:focus-visible)::before,.tbx-1013:is(:hover,:focus-visible)::after{width:calc(100% + 2px);height:calc(100% + 2px)}
.tbx-1013:focus-visible{outline:3px solid #7b65db;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1013::before,.tbx-1013::after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
会社概要・お問い合わせなどのアウトラインボタン
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。