Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1106" aria-label="外部リンク"><span class="tbx-1106__label">FOLLOW US</span><span class="tbx-1106__links"><a href="#instagram" aria-label="Instagram">◎</a><a href="#youtube" aria-label="動画チャンネル">▶</a><a href="#mail" aria-label="メール">✉</a></span><span class="tbx-1106__arrow" aria-hidden="true">↗</span></nav>
CSS
.tbx-1106{display:flex;align-items:center;gap:10px;width:min(284px,100%);min-height:85px;padding:10px 13px;border-radius:9px;background:#293348;color:#fff;font-family:system-ui,sans-serif;overflow:hidden}
.tbx-1106__label{font-size:11px;font-weight:800;letter-spacing:.09em;white-space:nowrap}.tbx-1106__links{margin-left:auto;display:flex;align-items:center;gap:5px;height:49px}.tbx-1106__links a{position:relative;display:grid;place-items:center;height:31px;width:31px;border-radius:50%;background:#cad1ec;color:#344366;font-size:17px;text-decoration:none;opacity:.4;transform:scale(.78) translateY(5px);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .35s,background .35s}.tbx-1106__links a:nth-child(2){transition-delay:.05s}.tbx-1106__links a:nth-child(3){transition-delay:.1s}.tbx-1106__arrow{font-size:18px;font-weight:400;color:#cdd8e5}
.tbx-1106:is(:hover,:focus-within) .tbx-1106__links a{opacity:1;transform:scale(1) translateY(0)}.tbx-1106__links a:is(:hover,:focus-visible){background:#f6d69c;color:#283342;transform:scale(1.1)!important}.tbx-1106 a:focus-visible{outline:3px solid #f6d69c;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1106 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Footer / Social
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。