Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1025" type="button"><span>資料を見る</span><span class="tbx-1025__arrow" aria-hidden="true">↗</span></button>
CSS
.tbx-1025{position:relative;display:inline-flex;justify-content:center;align-items:center;gap:13px;overflow:hidden;min-width:174px;min-height:54px;padding:12px 20px;border:0;border-radius:4px;background:#204665;color:white;box-shadow:0 6px 15px #1e405225;font:650 14px/1.4 system-ui,sans-serif;cursor:pointer}
.tbx-1025::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-left:0 solid transparent;border-bottom:0 solid transparent;border-top:0 solid #f7c68c;transition:border-width .3s ease}
.tbx-1025__arrow{display:block;transform:translate(-6px,6px);opacity:0;transition:transform .3s ease,opacity .3s ease}
.tbx-1025:is(:hover,:focus-visible)::after{border-left-width:20px;border-top-width:20px}
.tbx-1025:is(:hover,:focus-visible) .tbx-1025__arrow{transform:translate(0,0);opacity:1}
.tbx-1025:focus-visible{outline:3px solid #c28bfc;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1025::after,.tbx-1025__arrow{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
サービス紹介・資料ダウンロードのCTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。