Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1027" type="button" aria-label="作品を見る"><span aria-hidden="true"><span>作</span><span>品</span><span>を</span><span>見</span><span>る</span></span></button>
CSS
.tbx-1027{display:inline-block;padding:12px 7px;border:0;background:transparent;color:#243956;font:750 22px/1.5 system-ui,sans-serif;cursor:pointer}
.tbx-1027>span{display:flex;gap:2px}
.tbx-1027>span>span{display:inline-block;transform:translateY(0);transition:transform .36s cubic-bezier(.25,.9,.18,1.2),color .3s ease;transition-delay:calc(var(--n)*45ms)}
.tbx-1027>span>span:nth-child(1){--n:0}.tbx-1027>span>span:nth-child(2){--n:1}.tbx-1027>span>span:nth-child(3){--n:2}.tbx-1027>span>span:nth-child(4){--n:3}.tbx-1027>span>span:nth-child(5){--n:4}
.tbx-1027:is(:hover,:focus-visible)>span>span{transform:translateY(-7px);color:#287b91}
.tbx-1027:focus-visible{outline:3px solid #855fc2;outline-offset:3px;border-radius:3px}
@media(prefers-reduced-motion:reduce){.tbx-1027>span>span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
作品タイトル・リンク見出し
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。