Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tbx-1290"><span class="tbx-1290__label">SEE THE WORK</span><span class="tbx-1290__axis" aria-hidden="true"><span>→</span></span></button>CSS
*{box-sizing:border-box}
.tbx-1290{position:relative;display:flex;width:270px;max-width:100%;height:76px;padding:0;align-items:stretch;border:1px solid #172433;border-radius:2px;overflow:hidden;background:#fff;color:#172433;font-family:system-ui,sans-serif;cursor:pointer;box-shadow:5px 5px 0 #f0b49a;transition:box-shadow .36s}.tbx-1290__label{flex:1;align-self:center;padding-left:22px;letter-spacing:.11em;font-weight:750;font-size:12px;transition:transform .35s}.tbx-1290__axis{width:76px;display:grid;place-items:center;background:#17344d;color:white;clip-path:polygon(25% 0,100% 0,100% 100%,0 100%);transition:width .42s,background .42s}.tbx-1290__axis span{font-size:27px;display:block;transform:translateX(4px);transition:transform .4s}.tbx-1290:hover .tbx-1290__axis,.tbx-1290:focus-visible .tbx-1290__axis{width:103px;background:#ce5c3d}.tbx-1290:hover .tbx-1290__axis span,.tbx-1290:focus-visible .tbx-1290__axis span{transform:translateX(17px)}.tbx-1290:hover .tbx-1290__label,.tbx-1290:focus-visible .tbx-1290__label{transform:translateX(-4px)}.tbx-1290:hover,.tbx-1290:focus-visible{box-shadow:2px 2px 0 #f0b49a}.tbx-1290:focus-visible{outline:3px solid #5b8df0;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1290 *,.tbx-1290::before,.tbx-1290::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。