Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1085" href="#contact"><span class="tbx-1085__copy"><small>START A PROJECT</small><strong>相談してみる</strong></span><span class="tbx-1085__disc" aria-hidden="true"><i></i><span>↗</span></span></a>
CSS
.tbx-1085{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(278px,100%);padding:14px 16px 14px 20px;background:#103948;color:white;text-decoration:none;border-radius:60px;font-family:system-ui,sans-serif;transition:background .35s}
.tbx-1085__copy{display:flex;flex-direction:column;gap:5px}.tbx-1085__copy small{font-size:9px;letter-spacing:.12em;color:#99d0cf;font-weight:700}.tbx-1085__copy strong{font-size:17px;font-weight:650}
.tbx-1085__disc{width:52px;height:52px;flex:none;background:#d8eddf;border-radius:50%;display:grid;place-items:center;color:#144a4b;position:relative}.tbx-1085__disc span{font-size:23px;transition:transform .4s}
.tbx-1085__disc i{position:absolute;inset:-7px;border:2px solid transparent;border-top-color:#71dec7;border-left-color:#71dec7;border-radius:50%;transform:rotate(-105deg);opacity:0;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .25s}
.tbx-1085__disc i:after{position:absolute;content:"";top:-5px;left:50%;height:8px;width:8px;border-radius:50%;background:#eab77a}
.tbx-1085:is(:hover,:focus-visible){background:#1b5862}.tbx-1085:is(:hover,:focus-visible) i{opacity:1;transform:rotate(105deg)}.tbx-1085:is(:hover,:focus-visible) .tbx-1085__disc span{transform:translate(3px,-3px)}
.tbx-1085:focus-visible{outline:3px solid #eebc78;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1085,.tbx-1085 *{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 に対応。