Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1119" type="button" aria-label="メニューを開く"><span class="tbx-1119__glyph" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="tbx-1119__caption"><strong>EXPLORE</strong><small>メニューを見る</small></span></button>
CSS
.tbx-1119{display:flex;align-items:center;gap:14px;width:min(270px,100%);min-height:84px;padding:14px 18px;border:1px solid #8daec0;border-radius:48px;background:#eef5f7;color:#2b5367;cursor:pointer;font-family:system-ui,sans-serif;transition:background .35s,border-color .35s}
.tbx-1119__glyph{width:54px;height:54px;border-radius:50%;background:#2b617a;display:block;flex:none;position:relative}.tbx-1119__glyph i{position:absolute;left:25px;top:25px;background:#fff;border-radius:3px;width:5px;height:5px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-radius .3s}.tbx-1119__glyph i:nth-child(1){transform:translate(-7px,-7px) scaleX(3.8)}.tbx-1119__glyph i:nth-child(2){transform:translate(-7px,-7px) scaleY(3.8)}.tbx-1119__glyph i:nth-child(3){transform:translate(-7px,-7px)}.tbx-1119__glyph i:nth-child(4){transform:translate(-7px,-7px)}
.tbx-1119__caption{display:flex;flex-direction:column;gap:5px;align-items:flex-start}.tbx-1119__caption strong{font-size:13px;letter-spacing:.1em}.tbx-1119__caption small{font-size:10px;color:#678796}.tbx-1119:is(:hover,:focus-visible){background:#daecf1;border-color:#477f96}.tbx-1119:is(:hover,:focus-visible) .tbx-1119__glyph i:nth-child(1){transform:translate(-10px,-10px)}.tbx-1119:is(:hover,:focus-visible) .tbx-1119__glyph i:nth-child(2){transform:translate(8px,-10px)}.tbx-1119:is(:hover,:focus-visible) .tbx-1119__glyph i:nth-child(3){transform:translate(-10px,8px)}.tbx-1119:is(:hover,:focus-visible) .tbx-1119__glyph i:nth-child(4){transform:translate(8px,8px)}
.tbx-1119:focus-visible{outline:3px solid #2b617a;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1119 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / UI Components
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。