Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1251"><button class="notice" type="button" aria-label="通知 3件"><span class="bell" aria-hidden="true"><svg viewBox="0 0 80 80" width="74" height="74"><path d="M23 52C29 46 27 35 28 29c1-9 6-15 12-15s11 6 12 15c1 6-1 17 5 23l4 5H19z" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round"/><path d="M33 64q7 11 14 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg></span><span class="badge">3</span><span class="msg">New updates</span></button></div>CSS
.tbx-1251{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1251 *, .tbx-1251 *::before,.tbx-1251 *::after{box-sizing:border-box}
.tbx-1251{background:#e9e9f2}.tbx-1251 .notice{position:relative;display:flex;align-items:center;gap:4px;width:240px;max-width:100%;height:118px;justify-content:center;border:0;background:#fff;cursor:pointer;border-radius:17px;box-shadow:0 10px 26px #58508a18;color:#514982}.tbx-1251 .bell{display:inline-block;transform-origin:50% 15%;transition:transform .3s}.tbx-1251 .badge{position:absolute;left:calc(50% + 24px);top:24px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#db6071;color:#fff;font-size:11px;font-weight:800;transition:transform .34s,box-shadow .34s}.tbx-1251 .msg{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}.tbx-1251 .notice:is(:hover,:focus-visible) .bell{animation:tb1251ring .68s ease-in-out 1}.tbx-1251 .notice:is(:hover,:focus-visible) .badge{transform:scale(1.26);box-shadow:0 0 0 7px #db607120}.tbx-1251 .notice:is(:hover,:focus-visible) .msg{opacity:1;transform:translateY(0)}@keyframes tb1251ring{0%,100%{transform:rotate(0)}20%{transform:rotate(17deg)}45%{transform:rotate(-13deg)}70%{transform:rotate(8deg)}}
@media(prefers-reduced-motion:reduce){.tbx-1251 *, .tbx-1251 *::before, .tbx-1251 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Notification, Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。