Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1230"><a class="cta" href="#tb1230"><span class="micro">START A PROJECT</span><span class="main">See what we can make <b aria-hidden="true">→</b></span><span class="back">制作事例とプロセスを見る <b aria-hidden="true">↗</b></span></a></div>CSS
.tbx-1230{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-1230 * ,.tbx-1230 *::before,.tbx-1230 *::after{box-sizing:border-box}
.tbx-1230{background:#e5e8e2}.tbx-1230 .cta{width:min(100%,310px);height:96px;background:#1e474b;color:white;text-decoration:none;padding:22px 22px 18px;position:relative;overflow:hidden;border-radius:6px;box-shadow:7px 9px 0 #94aaa3;transition:box-shadow .35s,transform .35s}.tbx-1230 .micro{font-size:10px;letter-spacing:.18em;color:#9bc4b9;font-weight:700}.tbx-1230 .main,.tbx-1230 .back{position:absolute;left:22px;right:20px;bottom:20px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:15px;font-weight:750;transition:transform .42s cubic-bezier(.2,.7,.1,1),opacity .3s}.tbx-1230 .back{transform:translateY(51px);opacity:.1;color:#f8dfad;font-size:13px}.tbx-1230 .main b,.tbx-1230 .back b{font-size:22px;font-weight:500}.tbx-1230 .cta:is(:hover,:focus-visible){transform:translate(4px,4px);box-shadow:3px 5px 0 #94aaa3}.tbx-1230 .cta:is(:hover,:focus-visible) .main{transform:translateY(-55px);opacity:0}.tbx-1230 .cta:is(:hover,:focus-visible) .back{transform:translateY(0);opacity:1}.tbx-1230 .cta:focus-visible{outline:3px solid #ae6137;outline-offset:6px}
@media(prefers-reduced-motion:reduce){.tbx-1230 *, .tbx-1230 *::before,.tbx-1230 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Landing Page
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。