Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1099" href="#story"><small>STUDIO JOURNAL / 05</small><span class="tbx-1099__word">CREATE</span><span class="tbx-1099__rule" aria-hidden="true"></span><span class="tbx-1099__footer">新しいアイデアを読む <b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1099{display:flex;flex-direction:column;justify-content:center;width:min(288px,100%);min-height:155px;padding:15px;background:#f2eadd;color:#7b513f;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden}
.tbx-1099 small{font-size:9px;font-weight:750;letter-spacing:.1em;color:#987d6d}
.tbx-1099__word{font-size:clamp(34px,11vw,48px);font-weight:900;letter-spacing:-.075em;line-height:1.25;color:transparent;-webkit-text-stroke:1.5px #9c6351;paint-order:stroke fill;transition:color .48s,transform .48s cubic-bezier(.2,.8,.2,1)}
.tbx-1099__rule{width:100%;height:2px;background:#c5a58f;position:relative;overflow:hidden}.tbx-1099__rule:before{content:"";position:absolute;inset:0;background:#bf664f;transform:scaleX(0);transform-origin:left;transition:transform .45s}
.tbx-1099__footer{display:flex;justify-content:space-between;margin-top:11px;font-size:10px;font-weight:650}.tbx-1099__footer b{font-size:17px;font-weight:400;transition:transform .35s}
.tbx-1099:is(:hover,:focus-visible) .tbx-1099__word{color:#9c6351;transform:translateX(5px)}.tbx-1099:is(:hover,:focus-visible) .tbx-1099__rule:before{transform:scaleX(1)}.tbx-1099:is(:hover,:focus-visible) .tbx-1099__footer b{transform:translate(2px,-2px)}
.tbx-1099:focus-visible{outline:3px solid #b66e51;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1099 *,.tbx-1099__rule:before{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Headings / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。