Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1123" href="#works" aria-label="SELECTED WORKS を見る"><span class="tbx-1123__top" aria-hidden="true">SELECTED</span><span class="tbx-1123__bottom" aria-hidden="true">SELECTED</span><span class="tbx-1123__base" aria-hidden="true">SELECTED</span><span class="tbx-1123__sub">WORKS <b>↗</b></span></a>CSS
.tbx-1123{width:min(280px,100%);height:130px;display:flex;position:relative;align-items:center;justify-content:center;flex-direction:column;text-decoration:none;color:#f3ece3;background:#242f43;border-radius:5px;font-family:system-ui,sans-serif;overflow:hidden;isolation:isolate}.tbx-1123__top,.tbx-1123__bottom,.tbx-1123__base{font-size:31px;font-weight:950;letter-spacing:-.08em;line-height:1.1;position:absolute;top:33px;transition:transform .42s cubic-bezier(.3,.8,.2,1);white-space:nowrap}.tbx-1123__base{color:#d2e1d8;z-index:0}.tbx-1123__top{clip-path:inset(0 0 49% 0);z-index:2}.tbx-1123__bottom{clip-path:inset(50% 0 0 0);z-index:2}.tbx-1123__sub{z-index:3;position:absolute;top:88px;letter-spacing:.21em;font-size:10px;font-weight:800;color:#e8b998}.tbx-1123__sub b{font-size:13px;letter-spacing:0;margin-left:7px}.tbx-1123:is(:hover,:focus-visible) .tbx-1123__top{transform:translateX(8px)}.tbx-1123:is(:hover,:focus-visible) .tbx-1123__bottom{transform:translateX(-8px)}.tbx-1123:focus-visible{outline:3px solid #e8b998;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1123 *{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 に対応。