Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#ticket" class="tbx-1110"><span class="tbx-1110__body"><small>ENTRY PASS</small><strong>参加チケット</strong><span>FREE ADMISSION</span></span><span class="tbx-1110__stub" aria-hidden="true"><b>✓</b><small>OPEN</small></span></a>
CSS
.tbx-1110{position:relative;display:flex;width:min(286px,100%);height:104px;border-radius:11px;background:#fff4dc;color:#513e36;text-decoration:none;font-family:system-ui,sans-serif;box-shadow:0 4px 15px #62463317;overflow:hidden;transition:box-shadow .3s,transform .3s}
.tbx-1110__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 17px;min-width:0}.tbx-1110__body small{font-size:9px;letter-spacing:.19em;font-weight:800;color:#b17044}.tbx-1110__body strong{font-size:17px;white-space:nowrap}.tbx-1110__body>span{font-size:9px;letter-spacing:.1em;color:#a58b78}.tbx-1110__stub{width:81px;border-left:2px dashed #cea98a;background:#edcaa8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background .35s;color:#5f473a}.tbx-1110__stub b{display:grid;place-items:center;width:38px;height:38px;border:1px solid #a5755a;border-radius:50%;font-size:20px;transform:scale(.8) rotate(-35deg);transition:transform .4s,background .35s}.tbx-1110__stub small{font-size:9px;font-weight:900;letter-spacing:.1em}
.tbx-1110:is(:hover,:focus-visible){box-shadow:0 11px 25px #6246332b;transform:translateY(-2px)}.tbx-1110:is(:hover,:focus-visible) .tbx-1110__stub{background:#d6ad89}.tbx-1110:is(:hover,:focus-visible) .tbx-1110__stub b{transform:scale(1) rotate(0);background:#fff4dc}
.tbx-1110:focus-visible{outline:3px solid #a5755a;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1110,.tbx-1110 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Downloads / Event
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。