Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1133" href="#consult"><span class="tbx-1133__fold" aria-hidden="true"></span><span class="tbx-1133__body"><small>START HERE</small><strong>無料相談を予約</strong><span class="tbx-1133__arrow" aria-hidden="true">→</span></span></a>CSS
.tbx-1133{position:relative;display:block;width:min(295px,100%);color:#fff;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate;margin:0 12px 12px 0}
.tbx-1133__body{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:80px;padding:14px 18px;background:#244760;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .42s cubic-bezier(.2,.7,.2,1),background .42s}
.tbx-1133 small{font-size:9px;letter-spacing:.13em;color:#b8ced8;flex:0 0 45px;line-height:1.4}.tbx-1133 strong{font-size:17px;white-space:nowrap;font-weight:750}.tbx-1133__arrow{margin-left:auto;font-size:26px;transform:translateX(-6px);transition:transform .42s}
.tbx-1133__fold{position:absolute;inset:8px -10px -9px 8px;background:#e9ae5d;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .42s,transform .42s}
.tbx-1133:is(:hover,:focus-visible) .tbx-1133__body{clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%,4% 50%);background:#1b3b54}
.tbx-1133:is(:hover,:focus-visible) .tbx-1133__fold{clip-path:polygon(0 0,94% 0,100% 50%,94% 100%,0 100%,5% 50%);transform:translate(4px,3px)}
.tbx-1133:is(:hover,:focus-visible) .tbx-1133__arrow{transform:translateX(0)}
.tbx-1133:focus-visible{outline:3px solid #e9ae5d;outline-offset:5px}
@media (prefers-reduced-motion: reduce) { .tbx-1133, .tbx-1133 *, .tbx-1133::before, .tbx-1133::after, .tbx-1133 *::before, .tbx-1133 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。