Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1260"><button class="quote" type="button"><span class="mark" aria-hidden="true">“</span><span class="line">Clarity is the<br><em>quietest form</em><br>of confidence.</span><span class="byline">— DESIGN NOTES / VOL. 3 <b>READ ↗</b></span></button></div>CSS
.tbx-1260{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-1260 *,.tbx-1260 *::before,.tbx-1260 *::after{box-sizing:border-box}
.tbx-1260{background:#dce7eb}
.tbx-1260 .quote{cursor:pointer;position:relative;border:0;background:#fdfbf6;text-align:left;color:#213f52;width:min(290px,100%);min-height:166px;padding:20px 22px 20px 56px;box-shadow:4px 5px 0 #9faeb2;overflow:hidden}
.tbx-1260 .quote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#c98059;transition:width .5s}
.tbx-1260 .mark{font-family:Georgia;font-size:64px;line-height:1;color:#cd9979;position:absolute;left:18px;top:15px;transition:transform .5s}
.tbx-1260 .line{font:20px/1.15 Georgia,serif;position:relative;letter-spacing:-.035em}
.tbx-1260 .line em{color:#c07351}
.tbx-1260 .byline{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:18px;font-size:8px;letter-spacing:.11em;font-weight:750;transform:translateY(30px);opacity:0;max-height:0;transition:transform .42s,opacity .34s,max-height .4s}
.tbx-1260 .byline b{color:#ba6543;white-space:nowrap}
.tbx-1260 .quote:is(:hover,:focus-visible) .mark{transform:translateY(-8px)}
.tbx-1260 .quote:is(:hover,:focus-visible) .byline{transform:none;opacity:1;max-height:40px}
.tbx-1260 .quote:is(:hover,:focus-visible):before{width:9px}
@media (prefers-reduced-motion: reduce) {.tbx-1260 *, .tbx-1260 *::before, .tbx-1260 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article, Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。