Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1275"><button class="status" type="button" aria-label="ステータス確認"><span class="orbit" aria-hidden="true"><i class="p1"></i><i class="p2"></i><i class="p3"></i><b>✓</b></span><span class="text">Verified <small>All checks passed</small></span></button></div>CSS
.tbx-1275{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;padding:24px;background:#eaf4ee;color:#215341;font-family:system-ui,sans-serif}.tbx-1275 *{box-sizing:border-box}
.tbx-1275 .status{display:flex;align-items:center;gap:16px;border:1px solid #b0ceb9;background:white;border-radius:15px;padding:15px 22px;cursor:pointer;color:inherit;box-shadow:0 12px 25px #447b5c1c;transition:box-shadow .3s}
.tbx-1275 .orbit{position:relative;width:55px;height:55px;border:2px dashed #afcdb5;border-radius:50%;display:grid;place-items:center;transition:transform .5s,border-color .3s}.tbx-1275 .orbit b{display:grid;place-items:center;border-radius:50%;height:35px;width:35px;background:#548f6a;color:white;font-size:18px;transition:background .3s}
.tbx-1275 .orbit i{position:absolute;width:7px;height:7px;background:#aec6ad;border-radius:50%;transition:transform .36s,background .36s}.tbx-1275 .p1{top:-4px;left:24px}.tbx-1275 .p2{bottom:5px;left:-3px}.tbx-1275 .p3{right:-4px;bottom:14px}
.tbx-1275 .text{text-align:left;font:800 13px system-ui}.tbx-1275 .text small{display:block;font:400 10px system-ui;color:#88a096;margin-top:4px}
.tbx-1275 .status:is(:hover,:focus-visible) .orbit{transform:rotate(30deg);border-color:#4c926c}.tbx-1275 .status:is(:hover,:focus-visible) .orbit i{background:#f0a24e;transform:scale(1.5)}.tbx-1275 .status:is(:hover,:focus-visible) .orbit b{background:#2f7353}.tbx-1275 .status:is(:hover,:focus-visible){box-shadow:0 16px 30px #447b5c35}
.tbx-1275 :focus-visible{outline:3px solid #efaa54;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1275 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Status, Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。