Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1098" href="#download"><span class="tbx-1098__symbol" aria-hidden="true">↓</span><span class="tbx-1098__title"><strong>資料をダウンロード</strong><small>Company Profile</small></span><span class="tbx-1098__aside" aria-hidden="true"><b>PDF</b><i>↗</i></span></a>
CSS
.tbx-1098{display:flex;align-items:center;width:min(286px,100%);height:78px;border:1px solid #abc2b7;border-radius:9px;overflow:hidden;color:#294940;background:#f5f9f5;text-decoration:none;font-family:system-ui,sans-serif;transition:border-color .3s,box-shadow .3s}
.tbx-1098__symbol{font-size:24px;font-weight:300;display:grid;place-items:center;width:51px;height:100%;color:#fff;background:#427d6a;flex:none;transition:background .3s}
.tbx-1098__title{min-width:0;flex:1;display:flex;flex-direction:column;padding:0 11px;gap:4px}.tbx-1098__title strong{font-size:12px;white-space:nowrap}.tbx-1098__title small{font-size:9px;color:#6c8c80;letter-spacing:.04em}
.tbx-1098__aside{width:28px;height:100%;background:#d8ebe1;display:flex;align-items:center;justify-content:center;gap:10px;flex:none;overflow:hidden;transition:width .36s cubic-bezier(.2,.8,.2,1),background .3s}.tbx-1098__aside b{font-size:10px;letter-spacing:.06em;opacity:0;transform:translateX(14px);transition:transform .32s,opacity .25s}.tbx-1098__aside i{font-size:18px;font-style:normal;transform:translateX(-23px);transition:transform .32s}
.tbx-1098:is(:hover,:focus-visible){border-color:#427d6a;box-shadow:0 5px 12px #2c79571b}.tbx-1098:is(:hover,:focus-visible) .tbx-1098__symbol{background:#315f4f}.tbx-1098:is(:hover,:focus-visible) .tbx-1098__aside{width:73px;background:#b9dfcf}.tbx-1098:is(:hover,:focus-visible) .tbx-1098__aside b,.tbx-1098:is(:hover,:focus-visible) .tbx-1098__aside i{opacity:1;transform:translateX(0)}
.tbx-1098:focus-visible{outline:3px solid #a5c5ac;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1098,.tbx-1098 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Downloads / Resources
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。