Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1121" href="#enquiry"><span class="tbx-1121__face"><span><small>START A PROJECT</small><strong>制作を相談する</strong></span><b aria-hidden="true">↗</b></span></a>CSS
.tbx-1121{display:block;position:relative;width:min(272px,100%);color:#fff;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate;margin:0 10px 10px 0}.tbx-1121:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#c88f6d 0 3px,transparent 3px 8px);border:1px solid #c88f6d;transform:translate(0,0);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:-1}.tbx-1121__face{height:85px;padding:17px 17px;display:flex;align-items:center;justify-content:space-between;background:#284b55;border:1px solid #284b55;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.tbx-1121__face>span{display:flex;flex-direction:column;gap:7px}.tbx-1121 small{font-size:9px;font-weight:800;letter-spacing:.15em;color:#bbd4d2}.tbx-1121 strong{font-size:17px;letter-spacing:.02em}.tbx-1121 b{font-size:27px;font-weight:400;transition:transform .4s}.tbx-1121:is(:hover,:focus-visible):before{transform:translate(10px,10px)}.tbx-1121:is(:hover,:focus-visible) .tbx-1121__face{transform:translate(-3px,-3px)}.tbx-1121:is(:hover,:focus-visible) b{transform:translate(3px,-3px)}.tbx-1121:focus-visible{outline:3px solid #c88f6d;outline-offset:5px}@media(prefers-reduced-motion:reduce){.tbx-1121,.tbx-1121 *,.tbx-1121:before{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 に対応。