Live Demo
ホバーまたはTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1057" tabindex="0"><div class="tbx-1057__dot" aria-hidden="true"></div><div class="tbx-1057__text"><b>データの同期が完了しました</b><small>約2分前 · システム通知</small><span>同期した内容は管理画面から確認できます。</span></div><span class="tbx-1057__arrow" aria-hidden="true">→</span></div>
CSS
.tbx-1057{display:flex;gap:11px;align-items:flex-start;padding:16px 13px;width:min(290px,100%);border:1px solid #dce4eb;border-radius:9px;background:#fff;font-family:system-ui;color:#2d465a;transition:border-color .24s,background .24s,box-shadow .24s}
.tbx-1057__dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#438f86;margin-top:5px;box-shadow:0 0 0 4px #e4f3ee;transition:transform .25s,box-shadow .25s}
.tbx-1057__text{flex:1;display:grid;gap:5px;min-width:0}.tbx-1057 b{font-size:11px}.tbx-1057 small{font-size:10px;color:#8a9aab}.tbx-1057__text span{font-size:10px;line-height:1.65;color:#647989}.tbx-1057__arrow{color:#a9b8c6;align-self:center;font-size:20px;transition:transform .24s,color .24s}
.tbx-1057:is(:hover,:focus-visible){border-color:#74b0a8;background:#f3fbf8;box-shadow:0 9px 20px #2c776b12}.tbx-1057:is(:hover,:focus-visible) .tbx-1057__dot{transform:scale(1.3);box-shadow:0 0 0 6px #d9eee6}.tbx-1057:is(:hover,:focus-visible) .tbx-1057__arrow{transform:translateX(3px);color:#27837a}
.tbx-1057:focus-visible{outline:3px solid #d6a36b;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1057,.tbx-1057__dot,.tbx-1057__arrow{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard / Help
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末ではタップ・選択による操作が可能な部分を設けています。
Browser：最新のChrome・Firefox・Safari・Edgeでの利用を想定。:has()を使う素材は対応ブラウザが必要です。
Reduced Motion：prefers-reduced-motion: reduce に対応。