Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1206"><button type="button" class="tbx-1206-action"><span class="tbx-1206-back" aria-hidden="true"></span><span class="tbx-1206-front">Browse projects <b aria-hidden="true">↗</b></span><span class="tbx-1206-badge" aria-hidden="true">24</span></button></div>CSS
.tbx-1206{box-sizing:border-box}
.tbx-1206{display:grid;place-items:center;width:100%;min-height:182px;padding:24px;background:#e6f0fc;font-family:Arial,sans-serif}.tbx-1206 *{box-sizing:border-box}.tbx-1206-action{position:relative;display:block;width:min(100%,290px);height:68px;border:0;background:transparent;color:#14294b;cursor:pointer}.tbx-1206-back{position:absolute;inset:7px -5px -6px 7px;background:#7da3d8;border-radius:6px;transition:transform .38s}.tbx-1206-front{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 29px 0 22px;border:2px solid #102d58;border-radius:6px;background:#fff;font-weight:800;font-size:15px;transition:transform .38s}.tbx-1206-front b{font-size:21px}.tbx-1206-badge{display:grid;place-items:center;position:absolute;top:-21px;right:-14px;width:48px;height:48px;border:2px solid #102d58;border-radius:50%;background:#ffe68a;font-size:15px;font-weight:900;transition:transform .46s cubic-bezier(.2,.8,.2,1),background .3s}.tbx-1206-action:is(:hover,:focus-visible) .tbx-1206-back{transform:translate(-9px,9px)}.tbx-1206-action:is(:hover,:focus-visible) .tbx-1206-front{transform:translate(5px,-5px)}.tbx-1206-action:is(:hover,:focus-visible) .tbx-1206-badge{transform:rotate(180deg);background:#ffc969}.tbx-1206-action:focus-visible{outline:3px solid #315c9d;outline-offset:12px}
@media (prefers-reduced-motion:reduce){.tbx-1206 *, .tbx-1206 *::before, .tbx-1206 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。