Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1271"><button class="course" type="button"><span class="eyebrow">COURSE / 04</span><span class="title">Designing with Type</span><span class="desc">A practical introduction to better layouts.</span><span class="lessons"><span><b>01</b> Type scale <small>12 min</small></span><span><b>02</b> Rhythm & grids <small>18 min</small></span><span><b>03</b> Real examples <small>24 min</small></span></span><span class="footer"><b>Explore the lessons</b><i aria-hidden="true">↗</i></span></button></div>CSS
.tbx-1271{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;padding:18px;background:#e9eee9;font-family:system-ui,sans-serif;color:#1b4033}.tbx-1271 *{box-sizing:border-box}
.tbx-1271 .course{display:grid;gap:8px;cursor:pointer;text-align:left;width:min(320px,100%);border:1px solid #a9c2ae;padding:20px;background:white;color:inherit;box-shadow:7px 7px 0 #bfd8c4;font:inherit;transition:box-shadow .3s}
.tbx-1271 .eyebrow{font:800 9px system-ui;letter-spacing:.15em;color:#6a927c}.tbx-1271 .title{font:700 clamp(17px,2vw,21px) Georgia,serif}.tbx-1271 .desc{font:400 11px system-ui;color:#73847b}.tbx-1271 .lessons{display:grid;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .4s;margin:0}
.tbx-1271 .lessons>span{border-top:1px solid #d7e3d9;padding-top:6px;font-size:10px;display:flex;align-items:center;gap:10px}.tbx-1271 .lessons b{color:#4b8b67;font-size:9px}.tbx-1271 .lessons small{margin-left:auto;color:#88998e}
.tbx-1271 .footer{display:flex;justify-content:space-between;border-top:1px solid #d7e3d9;padding-top:10px;margin-top:3px;font:600 10px system-ui}.tbx-1271 .footer i{font:normal 18px system-ui;transition:transform .3s}
.tbx-1271 .course:is(:hover,:focus-visible){box-shadow:3px 3px 0 #bfd8c4}.tbx-1271 .course:is(:hover,:focus-visible) .lessons{max-height:125px;opacity:1}.tbx-1271 .course:is(:hover,:focus-visible) .footer i{transform:translate(3px,-3px)}
.tbx-1271 :focus-visible{outline:3px solid #db923b;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1271 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Education, Course
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。