Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1142" href="#company"><span class="tbx-1142__badge" aria-hidden="true"><i>↑</i></span><span class="tbx-1142__name"><small>ABOUT COMPANY</small><strong>会社情報を見る</strong></span><span class="tbx-1142__end" aria-hidden="true">01</span></a>CSS
.tbx-1142{box-sizing:border-box;width:min(307px,100%);min-height:92px;display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none;font-family:system-ui,sans-serif;color:#344e62;background:#edf3f4;border:1px solid #bcccd3;border-radius:12px;transition:background .35s}
.tbx-1142__badge{width:57px;height:57px;flex:none;border:1px solid #7098a4;border-radius:50%;display:grid;place-items:center;position:relative;transition:background .4s}.tbx-1142__badge:before,.tbx-1142__badge:after{content:"";position:absolute;inset:7px;border:1px dashed #80a3ad;border-radius:50%;transition:transform .55s}.tbx-1142__badge:after{inset:19px;border-style:solid;border-color:#4a899a}.tbx-1142__badge i{z-index:1;font-size:25px;font-style:normal;transition:transform .55s}
.tbx-1142__name{display:grid;gap:7px}.tbx-1142__name small{font-size:9px;letter-spacing:.12em;font-weight:800;color:#7798a0}.tbx-1142__name strong{font-size:16px}.tbx-1142__end{margin-left:auto;align-self:flex-start;font-size:10px;color:#87a1a9}
.tbx-1142:is(:hover,:focus-visible){background:#ddebee}.tbx-1142:is(:hover,:focus-visible) .tbx-1142__badge:before{transform:rotate(90deg)}.tbx-1142:is(:hover,:focus-visible) .tbx-1142__badge i{transform:rotate(45deg)}.tbx-1142:is(:hover,:focus-visible) .tbx-1142__badge{background:#d6e6e8}.tbx-1142:focus-visible{outline:3px solid #6b9aab;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1142, .tbx-1142 *, .tbx-1142::before, .tbx-1142::after, .tbx-1142 *::before, .tbx-1142 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。