Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1239"><a class="badge" href="#tb1239" aria-label="次へ進む"><svg aria-hidden="true" viewBox="0 0 96 96"><path class="sheet" d="M17 16H64L79 31V78H17Z"/><path class="fold" d="M64 16V31H79"/><path class="arrow" d="M30 51H66M53 38L66 51L53 64"/></svg><span>OPEN DETAILS</span></a></div>CSS
.tbx-1239{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1239 * ,.tbx-1239 *::before,.tbx-1239 *::after{box-sizing:border-box}
.tbx-1239{background:#efe9e3}.tbx-1239 .badge{display:grid;justify-items:center;gap:7px;text-decoration:none;color:#76533c;font-size:9px;font-weight:850;letter-spacing:.14em;padding:8px 16px}.tbx-1239 svg{width:90px;height:90px;filter:drop-shadow(0 6px 9px #603c1e22);transition:transform .45s}.tbx-1239 .sheet{fill:#fff7e9;stroke:#b0774c;stroke-width:4;stroke-linejoin:round;transition:fill .45s,stroke .45s}.tbx-1239 .fold{fill:none;stroke:#bd7c50;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;transition:opacity .4s}.tbx-1239 .arrow{fill:none;stroke:#86502d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:80;transition:stroke-dashoffset .5s,stroke .5s}.tbx-1239 .badge:is(:hover,:focus-visible) svg{transform:rotate(-9deg) scale(1.05)}.tbx-1239 .badge:is(:hover,:focus-visible) .sheet{fill:#c37c4e;stroke:#a76535}.tbx-1239 .badge:is(:hover,:focus-visible) .fold{opacity:0}.tbx-1239 .badge:is(:hover,:focus-visible) .arrow{stroke:#fff;stroke-dashoffset:0}.tbx-1239 .badge:focus-visible{outline:3px solid #b77741;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.tbx-1239 *, .tbx-1239 *::before,.tbx-1239 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, CTA
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。