Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#reviews" class="tbx-1152"><span class="tbx-1152__quote" aria-hidden="true">“</span><span class="tbx-1152__body"><small>CLIENT VOICE / 04</small><strong>使いやすさが、<span>ぐっと上がりました。</span></strong><em>サービス導入企業の声 ↗</em></span></a>CSS
.tbx-1152{box-sizing:border-box;position:relative;display:block;width:min(300px,100%);padding:20px 20px 18px 24px;min-height:170px;border-radius:5px;background:#efe8f2;border-left:4px solid #aa8cba;text-decoration:none;color:#46394c;overflow:hidden;font-family:system-ui,sans-serif;transition:border-color .35s,background .35s}
.tbx-1152__quote{position:absolute;right:-8px;top:-29px;font-family:Georgia,serif;font-size:170px;line-height:1;color:#d3c4db;opacity:.28;transform:scale(.7) rotate(-15deg);transform-origin:top right;transition:transform .55s,opacity .55s}
.tbx-1152__body{position:relative;display:grid;gap:14px;z-index:1}.tbx-1152 small{font-size:10px;letter-spacing:.13em;font-weight:800;color:#775a83}.tbx-1152 strong{font-size:18px;line-height:1.5}.tbx-1152 strong span{display:block}.tbx-1152 em{font-style:normal;font-size:11px;font-weight:650;color:#70537f;transition:transform .42s;justify-self:start}
.tbx-1152:is(:hover,:focus-visible){border-color:#715389;background:#f1e5f6}.tbx-1152:is(:hover,:focus-visible) .tbx-1152__quote{opacity:.8;transform:scale(1) rotate(0)}.tbx-1152:is(:hover,:focus-visible) em{transform:translateX(8px)}
.tbx-1152:focus-visible{outline:3px solid #aa8cba;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1152, .tbx-1152 *, .tbx-1152::before, .tbx-1152::after, .tbx-1152 *::before, .tbx-1152 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Testimonials / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。