Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1095" href="#features" aria-label="セキュリティ機能を見る"><span class="tbx-1095__orbit" aria-hidden="true"><i></i><i></i><i></i><svg viewBox="0 0 24 24" width="31" height="31" fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 20 6v6c0 5-3.8 8-8 10-4.2-2-8-5-8-10V6z"/><path d="m8.5 12 2.4 2.5 4.9-5.3"/></svg></span><span class="tbx-1095__label"><small>SECURITY</small><strong>安全なサービス</strong></span><span class="tbx-1095__end" aria-hidden="true">↗</span></a>
CSS
.tbx-1095{width:min(282px,100%);height:93px;display:flex;align-items:center;gap:17px;padding:10px 13px;background:#fff;border:1px solid #d7e1e4;border-radius:13px;color:#21495a;text-decoration:none;font-family:system-ui,sans-serif;transition:box-shadow .35s}
.tbx-1095__orbit{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#e4f4f1;position:relative;transition:background .35s}.tbx-1095__orbit svg{transition:transform .42s;position:relative;z-index:2}
.tbx-1095__orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:#f0ab70;top:50%;left:50%;opacity:0;transition:transform .47s cubic-bezier(.22,1,.36,1),opacity .3s;transform:translate(-50%,-50%)}
.tbx-1095__orbit i:nth-child(2){background:#5ab9b0;transition-delay:.035s}.tbx-1095__orbit i:nth-child(3){background:#789dcb;transition-delay:.07s}
.tbx-1095__label{display:flex;flex-direction:column;gap:5px;min-width:0}.tbx-1095__label small{font-size:9px;letter-spacing:.12em;font-weight:800;color:#7a999b}.tbx-1095__label strong{font-size:13px;white-space:nowrap}.tbx-1095__end{margin-left:auto;font-size:21px;transition:transform .3s}
.tbx-1095:is(:hover,:focus-visible){box-shadow:0 7px 18px #304b5120}.tbx-1095:is(:hover,:focus-visible) .tbx-1095__orbit{background:#cff0e6}.tbx-1095:is(:hover,:focus-visible) .tbx-1095__orbit svg{transform:scale(1.12) rotate(-8deg)}
.tbx-1095:is(:hover,:focus-visible) i:nth-child(1){opacity:1;transform:translate(-50%,-50%) translate(0,-31px)}.tbx-1095:is(:hover,:focus-visible) i:nth-child(2){opacity:1;transform:translate(-50%,-50%) translate(30px,14px)}.tbx-1095:is(:hover,:focus-visible) i:nth-child(3){opacity:1;transform:translate(-50%,-50%) translate(-28px,18px)}
.tbx-1095:is(:hover,:focus-visible) .tbx-1095__end{transform:translate(3px,-3px)}.tbx-1095:focus-visible{outline:3px solid #d5a171;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1095,.tbx-1095 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Links / Features
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。