Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1205"><button type="button" class="tbx-1205-ticket"><span class="tbx-1205-text"><small>EVENT ACCESS</small><strong>Get your ticket</strong></span><span class="tbx-1205-code" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span class="tbx-1205-scanner"></span></span><span class="tbx-1205-arrow" aria-hidden="true">↗</span></button></div>CSS
.tbx-1205{box-sizing:border-box}
.tbx-1205{display:grid;place-items:center;width:100%;min-height:182px;padding:15px;background:#f3eee7;font-family:Arial,sans-serif}.tbx-1205 *{box-sizing:border-box}.tbx-1205-ticket{display:flex;align-items:center;gap:14px;position:relative;width:min(100%,350px);min-height:89px;padding:18px 17px 18px 20px;border:0;border-radius:8px;background:#152528;color:white;text-align:left;cursor:pointer;overflow:hidden;box-shadow:0 10px 24px #15252825}.tbx-1205-text{display:grid;gap:7px;flex:1;min-width:0}.tbx-1205-text small{font-size:9px;font-weight:bold;letter-spacing:.22em;color:#c1d9d3}.tbx-1205-text strong{font-size:17px;white-space:nowrap}.tbx-1205-code{position:relative;display:flex;align-items:stretch;gap:3px;height:39px;min-width:57px;overflow:hidden;padding:2px}.tbx-1205-code i{width:3px;background:#e6f4ec;opacity:.85}.tbx-1205-code i:nth-child(3n){width:6px}.tbx-1205-scanner{position:absolute;top:0;left:-5px;height:100%;width:5px;background:#edb96f;box-shadow:0 0 9px #edb96f;transition:transform .65s cubic-bezier(.22,.8,.2,1)}.tbx-1205-arrow{font-size:23px;transform:translate(-14px,12px);opacity:0;transition:transform .4s,opacity .4s}.tbx-1205-ticket:is(:hover,:focus-visible) .tbx-1205-scanner{transform:translateX(67px)}.tbx-1205-ticket:is(:hover,:focus-visible) .tbx-1205-arrow{transform:translate(0,0);opacity:1}.tbx-1205-ticket:focus-visible{outline:3px solid #d28c36;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1205 *, .tbx-1205 *::before, .tbx-1205 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Event
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。