Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1298" aria-label="Our services"><span class="tbx-1298__title">WHAT WE DO</span><a href="#section"><b>Strategy</b><small>DISCOVER</small><i>↗</i></a><a href="#section"><b>Design</b><small>EXPLORE</small><i>↗</i></a><a href="#section"><b>Development</b><small>BUILD</small><i>↗</i></a></nav>CSS
*{box-sizing:border-box}
.tbx-1298{width:300px;max-width:100%;height:166px;background:#142b35;color:#d5edf0;border-radius:9px;padding:13px 15px;font-family:system-ui,sans-serif}.tbx-1298__title{display:block;font-size:9px;letter-spacing:.2em;color:#87afb8;padding:0 0 7px}.tbx-1298 a{height:43px;display:flex;align-items:center;text-decoration:none;border-top:1px solid #46606a;color:inherit;gap:7px;transition:padding .3s}.tbx-1298 a b{flex:1;font-size:14px;font-weight:650;transition:color .3s}.tbx-1298 small{font-size:9px;letter-spacing:.09em;color:#d4c99f;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}.tbx-1298 i{display:grid;place-items:center;border:1px solid #71909b;width:23px;height:23px;border-radius:100%;font-style:normal;font-size:14px;transition:transform .35s,color .35s,background .35s}.tbx-1298 a:hover,.tbx-1298 a:focus-visible{padding-left:8px}.tbx-1298 a:hover b,.tbx-1298 a:focus-visible b{color:#f3be76}.tbx-1298 a:hover small,.tbx-1298 a:focus-visible small{opacity:1;transform:translateX(0)}.tbx-1298 a:hover i,.tbx-1298 a:focus-visible i{transform:rotate(45deg);background:#e8b36b;color:#142b35}.tbx-1298 a:focus-visible{outline:2px solid #e8b36b;outline-offset:-1px}
@media (prefers-reduced-motion:reduce){.tbx-1298 *,.tbx-1298::before,.tbx-1298::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。