Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1049" download="sample-guide.txt" href="data:text/plain;charset=utf-8,Sample%20Guide%20for%20TipsBlocks">
<span class="tbx-1049__icon" aria-hidden="true">↓</span><span class="tbx-1049__copy"><b>サービス案内資料</b><small>TXTデモ</small></span><span class="tbx-1049__end" aria-hidden="true">↗</span>
</a>
CSS
.tbx-1049{font:inherit;display:flex;align-items:center;gap:12px;width:min(292px,100%);padding:14px 15px;background:#fff;border:1px solid #d7e0eb;border-radius:10px;text-decoration:none;color:#233f54;box-shadow:0 4px 15px #26456d0a;transition:border-color .25s,box-shadow .25s}
.tbx-1049__icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:#eaf2f4;color:#306b7b;font-size:23px;transition:transform .28s,background .28s}
.tbx-1049__copy{display:grid;gap:5px;min-width:0;flex:1}.tbx-1049__copy b{font-size:12px}.tbx-1049__copy small{font-size:10px;color:#718394}
.tbx-1049__end{font-size:21px;opacity:.55;transition:transform .28s,opacity .28s}
.tbx-1049:is(:hover,:focus-visible){border-color:#71a6a9;box-shadow:0 10px 22px #24627e21}.tbx-1049:is(:hover,:focus-visible) .tbx-1049__icon{transform:translateY(3px);background:#d9eff0}.tbx-1049:is(:hover,:focus-visible) .tbx-1049__end{opacity:1;transform:translate(3px,-3px)}
.tbx-1049:focus-visible{outline:3px solid #d7a16a;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1049,.tbx-1049__icon,.tbx-1049__end{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Downloads / Resources
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。