Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1254"><button class="cta" type="button"><span class="rule top"></span><span class="copy">Explore services</span><span class="arr" aria-hidden="true">↗</span><span class="rule bottom"></span></button></div>CSS
.tbx-1254{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1254 *,.tbx-1254 *::before,.tbx-1254 *::after{box-sizing:border-box}
.tbx-1254{background:#f8f4ed}
.tbx-1254 .cta{cursor:pointer;border:0;background:transparent;color:#23334d;display:flex;align-items:center;justify-content:space-between;position:relative;width:min(276px,100%);min-height:66px;padding:15px 20px;font-family:inherit}
.tbx-1254 .copy{font-size:18px;font-weight:700;letter-spacing:-.025em}
.tbx-1254 .arr{font-size:24px;transition:transform .4s}
.tbx-1254 .rule{position:absolute;left:0;right:0;height:2px;background:#cdd2d1;overflow:hidden}
.tbx-1254 .top{top:0}
.tbx-1254 .bottom{bottom:0}
.tbx-1254 .rule:after{content:"";display:block;width:100%;height:100%;background:#cc6e45;transform:translateX(-100%);transition:transform .58s cubic-bezier(.22,.8,.2,1)}
.tbx-1254 .bottom:after{transform:translateX(100%);transition-delay:0s}
.tbx-1254 .cta:is(:hover,:focus-visible) .rule:after{transform:none}
.tbx-1254 .cta:is(:hover,:focus-visible) .arr{transform:translate(3px,-4px)}
@media (prefers-reduced-motion: reduce) {.tbx-1254 *, .tbx-1254 *::before, .tbx-1254 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。