Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1172" href="#story"><span>Design that</span><strong> <em>feels human</em></strong><span class="tbx-1172__foot">READ THE STORY ↗</span></a>
CSS
.tbx-1172{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:#24313b;text-align:center;font:500 26px/1.22 Georgia,serif}.tbx-1172 strong{position:relative;font:inherit;font-weight:700;z-index:0;padding:4px 9px}.tbx-1172 em{font-style:normal;position:relative;z-index:1}.tbx-1172 strong:before{content:'';position:absolute;inset:3px 0 0;background:#e6a6bb;z-index:-1;transform:scaleY(.12);transform-origin:bottom;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.tbx-1172__foot{margin-top:8px;font:700 10px system-ui;letter-spacing:.18em;color:#8b6b7b;transition:letter-spacing .4s}.tbx-1172:is(:hover,:focus-visible) strong:before{transform:scaleY(1)}.tbx-1172:is(:hover,:focus-visible) .tbx-1172__foot{letter-spacing:.25em}.tbx-1172:focus-visible{outline:3px solid #8b486c;outline-offset:6px}
@media (prefers-reduced-motion: reduce) { .tbx-1172, .tbx-1172 *, .tbx-1172::before, .tbx-1172::after, .tbx-1172 *::before, .tbx-1172 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Headline / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。