Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1109" href="#consult"><span class="tbx-1109__flap tbx-1109__top" aria-hidden="true"></span><span class="tbx-1109__flap tbx-1109__bottom" aria-hidden="true"></span><span class="tbx-1109__content"><span><small>GET IN TOUCH</small><strong>まずはご相談ください</strong></span><b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1109{width:min(286px,100%);height:88px;position:relative;display:flex;align-items:center;overflow:hidden;border-radius:9px;text-decoration:none;font-family:system-ui,sans-serif;color:#fff;background:#bd846a;isolation:isolate}
.tbx-1109__flap{position:absolute;left:0;right:0;height:50%;background:#2e4951;z-index:1;transition:transform .55s cubic-bezier(.22,.8,.15,1)}.tbx-1109__top{top:0;transform-origin:top}.tbx-1109__bottom{bottom:0;transform-origin:bottom;background:#315b61}
.tbx-1109__content{z-index:2;position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:7px}.tbx-1109__content>span{display:flex;flex-direction:column;gap:6px}.tbx-1109 small{font-size:9px;letter-spacing:.18em;color:#e2e8e5}.tbx-1109 strong{font-size:15px;white-space:nowrap}.tbx-1109 b{font-size:25px;font-weight:400;transition:transform .55s}
.tbx-1109:is(:hover,:focus-visible) .tbx-1109__top{transform:translateY(-78%)}.tbx-1109:is(:hover,:focus-visible) .tbx-1109__bottom{transform:translateY(78%)}.tbx-1109:is(:hover,:focus-visible) b{transform:translate(3px,-3px)}
.tbx-1109:focus-visible{outline:3px solid #bd846a;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1109 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。