Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#attachments" class="tbx-1155"><span class="tbx-1155__symbol" aria-hidden="true"><svg viewBox="0 0 56 56" width="56" height="56" fill="none"><path d="M35 17 22 34a8 8 0 0 0 13 10L49 25a13 13 0 0 0-21-16L11 31a18 18 0 0 0 29 21" stroke="currentColor" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span><span class="tbx-1155__copy"><strong>ATTACHMENTS</strong><small>資料を確認する</small></span><span class="tbx-1155__badge">PDF × 3</span></a>CSS
.tbx-1155{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:12px;width:min(310px,100%);min-height:109px;padding:16px 17px;border:1px solid #94b7c7;border-radius:12px;background:#e4f1f6;color:#1c526b;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden}
.tbx-1155__symbol{display:grid;place-items:center;flex:none;transform:translateY(0) rotate(0);transition:transform .48s cubic-bezier(.2,.8,.2,1)}.tbx-1155__symbol svg{width:47px;height:47px}
.tbx-1155__copy{display:grid;gap:7px}.tbx-1155 strong{font-size:14px;letter-spacing:.05em}.tbx-1155 small{font-size:11px;color:#4a7787}
.tbx-1155__badge{position:absolute;right:13px;top:10px;font-size:9px;padding:5px 7px;background:#256987;border-radius:4px;color:#fff;font-weight:750;opacity:0;transform:translateY(-13px);transition:transform .38s,opacity .38s}
.tbx-1155:is(:hover,:focus-visible) .tbx-1155__symbol{transform:translateY(-7px) rotate(-12deg)}.tbx-1155:is(:hover,:focus-visible) .tbx-1155__badge{transform:translateY(0);opacity:1}
.tbx-1155:focus-visible{outline:3px solid #256987;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1155, .tbx-1155 *, .tbx-1155::before, .tbx-1155::after, .tbx-1155 *::before, .tbx-1155 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Download / Documentation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。