Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1265"><button class="launch" type="button"><span class="mark" aria-hidden="true">↗</span><span class="lbl">Open workspace</span><span class="shortcut" aria-hidden="true"><kbd>⌘</kbd><kbd>K</kbd></span></button><p class="hint">Hover / focus to discover shortcut</p></div>CSS
.tbx-1265{display:grid;place-content:center;justify-items:center;gap:12px;box-sizing:border-box;min-height:218px;width:100%;max-width:100%;padding:24px 16px;background:#ecf2f1;color:#193b3a;font-family:system-ui,sans-serif}
.tbx-1265 *{box-sizing:border-box}.tbx-1265 .launch{display:flex;align-items:center;gap:12px;width:min(300px,100%);border:0;border-radius:12px;background:#154747;color:white;padding:11px 14px;font:600 13px system-ui,sans-serif;cursor:pointer;box-shadow:0 12px 25px #173a3730;transition:background .3s,transform .3s}
.tbx-1265 .mark{width:32px;height:32px;border-radius:8px;background:#fff2;display:grid;place-items:center;font-size:20px;transition:transform .32s;background .32s}.tbx-1265 .lbl{white-space:nowrap}
.tbx-1265 .shortcut{display:flex;gap:4px;max-width:0;opacity:0;overflow:hidden;transform:translateX(-12px);margin-left:auto;transition:max-width .38s,opacity .34s,transform .38s}
.tbx-1265 kbd{font:600 12px system-ui,sans-serif;background:#ffffff24;border:1px solid #ffffff61;padding:4px 6px;border-radius:5px}
.tbx-1265 .launch:is(:hover,:focus-visible){background:#19685d;transform:translateY(-2px)}.tbx-1265 .launch:is(:hover,:focus-visible) .shortcut{max-width:82px;opacity:1;transform:none}
.tbx-1265 .launch:is(:hover,:focus-visible) .mark{transform:rotate(45deg);background:#ffffff36}.tbx-1265 .hint{font-size:10px;color:#718a89;margin:0}
.tbx-1265 :focus-visible{outline:3px solid #e9a94c;outline-offset:4px}
@media (max-width:350px){.tbx-1265 .launch{gap:8px;padding:9px}.tbx-1265 .lbl{font-size:11px}}
@media(prefers-reduced-motion:reduce){.tbx-1265 *, .tbx-1265 *::before,.tbx-1265 *::after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard, CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。