Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1034" type="button"><span class="tbx-1034__back" aria-hidden="true"></span><span class="tbx-1034__front"><span class="tbx-1034__label">WORKS / 024</span><strong>Brand Story</strong><small>制作実績を見る ↗</small></span></button>
CSS
.tbx-1034{position:relative;width:min(230px,100%);height:145px;padding:0;border:0;background:transparent;color:#23435e;text-align:left;cursor:pointer}
.tbx-1034__back{position:absolute;inset:8px 10px 0;background:#b0d9d2;border-radius:8px;transform:translate(0,0) rotate(0);transition:transform .35s cubic-bezier(.22,.8,.18,1)}
.tbx-1034__front{position:absolute;inset:0 8px 8px 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:21px;border-radius:8px;border:1px solid #cad9e6;background:#fff;box-shadow:0 7px 13px #24455a18;transition:transform .35s cubic-bezier(.22,.8,.18,1)}
.tbx-1034__label{font:700 10px/1.2 system-ui,sans-serif;letter-spacing:.08em;color:#608493}.tbx-1034 strong{font:750 19px/1.3 system-ui,sans-serif}.tbx-1034 small{margin-top:auto;font:600 11px/1.35 system-ui,sans-serif;color:#36728c}
.tbx-1034:is(:hover,:focus-visible) .tbx-1034__back{transform:translate(10px,5px) rotate(4deg)}
.tbx-1034:is(:hover,:focus-visible) .tbx-1034__front{transform:translate(-5px,-5px)}
.tbx-1034:focus-visible{outline:3px solid #855fc2;outline-offset:5px;border-radius:8px}
@media(prefers-reduced-motion:reduce){.tbx-1034__back,.tbx-1034__front{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
制作実績・記事カード・テーマ一覧
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。