Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button type="button" class="tbx-1191" aria-label="記事をブックマークする（表示デモ）"><span class="tbx-1191__icon" aria-hidden="true"><svg viewBox="0 0 48 56" width="47" height="56"><path d="M9 6h30v43L24 39 9 49z" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/><path class="tbx-1191__fill" d="M9 6h30v43L24 39 9 49z" fill="currentColor"/></svg></span><span class="tbx-1191__copy"><strong>Save for later</strong><small>Bookmark this article</small></span></button>
CSS
.tbx-1191{box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:15px 18px;width:264px;max-width:100%;border:1px solid #dcc4c4;background:#fff7f4;color:#744e5a;border-radius:12px;cursor:pointer;text-align:left;font-family:system-ui,sans-serif;transition:box-shadow .3s,background .3s}.tbx-1191__icon{display:grid;place-items:center;width:51px;height:59px;color:#aa6371;transition:transform .45s cubic-bezier(.2,.8,.2,1),color .3s}.tbx-1191__fill{transform:scaleY(0);transform-origin:top;transition:transform .45s;opacity:.3}.tbx-1191__copy{display:grid;gap:6px}.tbx-1191__copy strong{font:750 14px system-ui}.tbx-1191__copy small{font-size:10px;color:#a58a90}.tbx-1191:is(:hover,:focus-visible){background:#fcebe7;box-shadow:0 8px 20px #915a6620}.tbx-1191:is(:hover,:focus-visible) .tbx-1191__icon{transform:rotate(-11deg) translateY(-3px);color:#bb4968}.tbx-1191:is(:hover,:focus-visible) .tbx-1191__fill{transform:scaleY(1)}.tbx-1191:focus-visible{outline:3px solid #c26678;outline-offset:3px}
@media (prefers-reduced-motion:reduce) {.tbx-1191,.tbx-1191 *,.tbx-1191::before,.tbx-1191::after,.tbx-1191 *::before,.tbx-1191 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article / Save
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。