Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1215"><button class="tbx-1215-button" type="button" aria-label="Open layers"><span class="tbx-1215-stack" aria-hidden="true"><i class="tbx-1215-plate a"></i><i class="tbx-1215-plate b"></i><i class="tbx-1215-plate c"></i></span><span class="tbx-1215-label">LAYERS</span></button></div>CSS
.tbx-1215{box-sizing:border-box}
.tbx-1215{display:grid;place-items:center;width:100%;min-height:182px;padding:16px;background:#e8e6f6;font-family:Arial,sans-serif}.tbx-1215 *{box-sizing:border-box}.tbx-1215-button{display:grid;justify-items:center;align-items:center;gap:10px;width:130px;padding:14px;border:0;background:transparent;color:#38335a;cursor:pointer}.tbx-1215-stack{position:relative;display:block;width:81px;height:66px}.tbx-1215-plate{position:absolute;left:22px;top:20px;width:38px;height:38px;border-radius:5px;transform:rotate(45deg) skew(-10deg,-10deg);border:2px solid #473d76;transition:transform .45s,background .4s}.tbx-1215-plate.a{background:#a79de4;z-index:3}.tbx-1215-plate.b{background:#d6ceff;z-index:2;transform:translateY(-9px) rotate(45deg) skew(-10deg,-10deg)}.tbx-1215-plate.c{background:#f0e9ff;z-index:1;transform:translateY(-18px) rotate(45deg) skew(-10deg,-10deg)}.tbx-1215-label{font-size:11px;font-weight:800;letter-spacing:.22em}.tbx-1215-button:is(:hover,:focus-visible) .tbx-1215-plate.a{transform:translate(-21px,4px) rotate(25deg) skew(-10deg,-10deg)}.tbx-1215-button:is(:hover,:focus-visible) .tbx-1215-plate.b{transform:translateY(-12px) rotate(45deg) skew(-10deg,-10deg)}.tbx-1215-button:is(:hover,:focus-visible) .tbx-1215-plate.c{transform:translate(20px,-23px) rotate(65deg) skew(-10deg,-10deg)}.tbx-1215-button:focus-visible{outline:3px solid #473d76;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1215 *, .tbx-1215 *::before, .tbx-1215 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Dashboard
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。