Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1151" href="#case-study"><span class="tbx-1151__top"><small>CASE / 024</small><strong>ECサイトの改善</strong><span>PROJECT SUMMARY ↗</span></span><span class="tbx-1151__receipt"><span>DESIGN REVIEW <b>DONE</b></span><span>UI REFINEMENT <b>DONE</b></span><span>PROJECT VALUE <b>+32%</b></span></span></a>CSS
.tbx-1151{box-sizing:border-box;position:relative;display:block;width:min(292px,100%);min-height:185px;padding:0 0 62px;color:#2a4351;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden;border-radius:12px;background:#f0f4f5}
.tbx-1151__top{box-sizing:border-box;display:grid;gap:14px;padding:19px 20px;min-height:133px;background:#2b5666;color:white;position:relative;z-index:2;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.tbx-1151__top small{font-size:10px;letter-spacing:.14em;color:#b9e3e4}.tbx-1151__top strong{font-size:18px}.tbx-1151__top>span{font-size:10px;letter-spacing:.08em;color:#b9e3e4}
.tbx-1151__receipt{box-sizing:border-box;position:absolute;z-index:1;left:14px;right:14px;top:82px;display:grid;gap:8px;padding:13px 13px 16px;background:#fffdf1;box-shadow:0 4px 6px #2344561a;transform:translateY(-30px);transition:transform .5s cubic-bezier(.2,.8,.2,1);clip-path:polygon(0 0,100% 0,100% 95%,98% 100%,94% 95%,90% 100%,86% 95%,82% 100%,78% 95%,74% 100%,70% 95%,66% 100%,62% 95%,58% 100%,54% 95%,50% 100%,46% 95%,42% 100%,38% 95%,34% 100%,30% 95%,26% 100%,22% 95%,18% 100%,14% 95%,10% 100%,6% 95%,2% 100%,0 95%)}
.tbx-1151__receipt span{font-size:9px;font-weight:750;display:flex;justify-content:space-between;gap:5px}.tbx-1151__receipt b{color:#a25c48}
.tbx-1151:is(:hover,:focus-visible) .tbx-1151__top{transform:translateY(-10px)}.tbx-1151:is(:hover,:focus-visible) .tbx-1151__receipt{transform:translateY(23px)}
.tbx-1151:focus-visible{outline:3px solid #65a0a4;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1151, .tbx-1151 *, .tbx-1151::before, .tbx-1151::after, .tbx-1151 *::before, .tbx-1151 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Case Study
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。