Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1227"><button class="tbx-1227-action" type="button" aria-label="Save to collection (demo)"><span class="tbx-1227-icon" aria-hidden="true">☆</span><span class="tbx-1227-text">Save to collection</span></button></div>CSS
.tbx-1227{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1227{display:grid;place-items:center;min-height:200px;width:100%;padding:20px;background:#eae6f5;font-family:Arial,sans-serif}.tbx-1227 *{box-sizing:border-box}.tbx-1227-action{display:flex;align-items:center;justify-content:center;gap:11px;width:55px;height:55px;min-width:0;padding:0 16px;border:2px solid #65509d;border-radius:40px;background:#fff;color:#544080;cursor:pointer;overflow:hidden;white-space:nowrap;box-shadow:0 6px 16px #5e479d21;transition:width .47s,background .33s,color .33s}.tbx-1227-icon{flex:0 0 auto;font-size:25px;line-height:1;transition:transform .45s}.tbx-1227-text{width:0;flex:0 0 auto;overflow:hidden;font-size:12px;font-weight:800;opacity:0;transition:width .4s,opacity .3s}.tbx-1227-action:is(:hover,:focus-visible){width:210px;justify-content:flex-start;background:#65509d;color:#fff}.tbx-1227-action:is(:hover,:focus-visible) .tbx-1227-icon{transform:rotate(-15deg)}.tbx-1227-action:is(:hover,:focus-visible) .tbx-1227-text{width:135px;opacity:1}.tbx-1227-action:focus-visible{outline:3px solid #3a2767;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1227 *, .tbx-1227 *::before,.tbx-1227 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Utility
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。