Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1084" href="mailto:hello@example.com"><span class="tbx-1084__top"><small>START A CONVERSATION</small><span aria-hidden="true">↗</span></span><strong>hello@example.com</strong><span class="tbx-1084__line" aria-hidden="true"></span></a>
CSS
.tbx-1084{display:grid;gap:15px;width:min(300px,100%);padding:21px 19px 20px;border-radius:8px;background:#132d3d;color:white;text-decoration:none;font:12px/1.2 system-ui,sans-serif;overflow:hidden}
.tbx-1084__top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tbx-1084__top small{font-size:9px;font-weight:700;letter-spacing:.1em;color:#a7c5d0;transition:color .28s}
.tbx-1084__top span{font-size:24px;display:inline-block;transition:transform .38s,color .38s}
.tbx-1084 strong{font-size:20px;letter-spacing:-.04em;white-space:nowrap;max-width:100%;font-weight:650}
.tbx-1084__line{height:2px;width:100%;background:#678996;position:relative;overflow:hidden}.tbx-1084__line:before{content:"";position:absolute;inset:0;background:#8dd5bc;transform:translateX(-100%);transition:transform .45s ease}
.tbx-1084:is(:hover,:focus-visible) .tbx-1084__top span{transform:translate(4px,-4px);color:#8dd5bc}.tbx-1084:is(:hover,:focus-visible) .tbx-1084__top small{color:#8dd5bc}.tbx-1084:is(:hover,:focus-visible) .tbx-1084__line:before{transform:translateX(0)}
.tbx-1084:focus-visible{outline:3px solid #e0b36f;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1084 *, .tbx-1084__line:before{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Contact / Footer
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。