Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1097" href="#contact"><span class="tbx-1097__inner"><small>LET’S TALK</small><strong>プロジェクトの相談</strong><b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1097{position:relative;display:block;width:min(279px,100%);padding:2px;border-radius:13px;background:#263e50;color:#fff;text-decoration:none;isolation:isolate;overflow:hidden;font-family:system-ui,sans-serif;box-shadow:0 7px 20px #18304a1a}
.tbx-1097::before{content:"";position:absolute;inset:-130%;background:conic-gradient(from 30deg,#e8b78b,#b3d3ba,#6db8ce,#b7a4de,#e8b78b);transform:rotate(0);opacity:0;transition:opacity .25s,transform .7s cubic-bezier(.2,.8,.2,1)}
.tbx-1097__inner{position:relative;display:flex;align-items:center;gap:10px;border-radius:11px;background:#182e41;padding:18px 14px;min-height:70px}
.tbx-1097 small{position:absolute;top:10px;left:14px;font-size:8px;font-weight:800;letter-spacing:.12em;color:#adc6d6}.tbx-1097 strong{font-size:15px;letter-spacing:-.02em;padding-top:8px;white-space:nowrap}.tbx-1097 b{margin-left:auto;font-size:25px;font-weight:450;transition:transform .4s;color:#a8d7d0}
.tbx-1097:is(:hover,:focus-visible)::before{opacity:1;transform:rotate(180deg)}.tbx-1097:is(:hover,:focus-visible) b{transform:translate(3px,-3px)}
.tbx-1097:focus-visible{outline:3px solid #edb486;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1097::before,.tbx-1097 b{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Landing Page
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。