Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1258"><button class="sample" type="button" aria-label="素材仕上げ色を表示"><span class="grain"></span><span class="tint"></span><span class="badge">MATERIAL 04</span><span class="caption">NATURAL <b>↗</b> FINISHED</span></button></div>CSS
.tbx-1258{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1258 *,.tbx-1258 *::before,.tbx-1258 *::after{box-sizing:border-box}
.tbx-1258{background:#f0ede8}
.tbx-1258 .sample{border:0;position:relative;overflow:hidden;width:min(290px,100%);height:171px;cursor:pointer;background:#c8b29a;padding:0;box-shadow:0 7px 22px #4c3a2f25}
.tbx-1258 .grain{position:absolute;inset:0;background:repeating-linear-gradient(25deg,#c5ab8d 0 3px,#e0c8a8 4px 13px,#9f856e 14px 15px);opacity:.85}
.tbx-1258 .grain:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff19 0 1px,transparent 2px 7px)}
.tbx-1258 .tint{position:absolute;inset:0;background:linear-gradient(145deg,#526d65ee,#243b3cdd);clip-path:inset(0 100% 0 0);transition:clip-path .65s cubic-bezier(.15,.7,.2,1)}
.tbx-1258 .badge{position:absolute;top:12px;left:13px;background:#f7f5e9;padding:6px 8px;font:750 9px/1.2 system-ui;letter-spacing:.12em;color:#4e514a}
.tbx-1258 .caption{position:absolute;bottom:13px;left:13px;color:white;font-size:10px;letter-spacing:.1em;text-shadow:0 2px 5px #0009}
.tbx-1258 .caption b{font-size:16px;font-weight:400;display:inline-block;transition:transform .4s}
.tbx-1258 .sample:is(:hover,:focus-visible) .tint{clip-path:inset(0)}
.tbx-1258 .sample:is(:hover,:focus-visible) .caption b{transform:translateX(8px)}
@media (prefers-reduced-motion: reduce) {.tbx-1258 *, .tbx-1258 *::before, .tbx-1258 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Product, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。