Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1167" type="button" aria-label="接続状態を確認"><span class="tbx-1167__signal" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span><strong>CONNECTED</strong><small>Network status ↗</small></span></button>
CSS
.tbx-1167{box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:13px 16px;background:#f1f8f7;border:1px solid #bcd9d5;border-radius:12px;cursor:pointer;color:#1b4c54;font-family:system-ui,sans-serif;text-align:left;min-width:238px;max-width:100%;transition:background .3s,box-shadow .3s}.tbx-1167__signal{display:flex;align-items:end;gap:4px;height:45px;padding:8px 6px 6px;background:#d7ede8;border-radius:7px}.tbx-1167__signal i{width:7px;height:8px;border-radius:3px 3px 1px 1px;background:#79a7a0;transform-origin:bottom;transition:height .32s cubic-bezier(.3,.85,.25,1),background .32s}.tbx-1167__signal i:nth-child(2){height:13px;transition-delay:.04s}.tbx-1167__signal i:nth-child(3){height:18px;transition-delay:.08s}.tbx-1167__signal i:nth-child(4){height:24px;transition-delay:.12s}.tbx-1167>span:last-child{display:flex;flex-direction:column;gap:5px}.tbx-1167 strong{font-size:12px;letter-spacing:.08em}.tbx-1167 small{font-size:10px;color:#577c78}.tbx-1167:is(:hover,:focus-visible){background:#e4f5ed;box-shadow:0 7px 16px #34706129}.tbx-1167:is(:hover,:focus-visible) .tbx-1167__signal i:first-child{height:20px;background:#248767}.tbx-1167:is(:hover,:focus-visible) .tbx-1167__signal i:nth-child(2){height:25px;background:#248767}.tbx-1167:is(:hover,:focus-visible) .tbx-1167__signal i:nth-child(3){height:31px;background:#248767}.tbx-1167:is(:hover,:focus-visible) .tbx-1167__signal i:nth-child(4){height:31px;background:#248767}.tbx-1167:focus-visible{outline:2px solid #248767;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1167, .tbx-1167 *, .tbx-1167::before, .tbx-1167::after, .tbx-1167 *::before, .tbx-1167 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Status / Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。