Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#studio" class="tbx-1088" aria-label="スタジオの紹介を見る"><small>CREATIVE STUDIO</small><span class="tbx-1088__words"><span>Make</span><span>Things</span><span>Better<span class="tbx-1088__asterisk" aria-hidden="true">✳</span></span></span><span class="tbx-1088__bottom">ABOUT US <span aria-hidden="true">↗</span></span></a>
CSS
.tbx-1088{width:min(275px,100%);min-height:200px;padding:19px 21px 16px;display:block;background:#eee2cf;color:#3a423e;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden;position:relative}
.tbx-1088 small{font-size:9px;font-weight:800;letter-spacing:.14em;color:#8b735e}.tbx-1088__words{display:flex;flex-direction:column;font-size:31px;line-height:.94;font-weight:840;letter-spacing:-.075em;margin:13px 0 13px}
.tbx-1088__words>span{display:block;width:max-content;max-width:100%;transition:transform .45s cubic-bezier(.22,1,.36,1),color .25s}.tbx-1088__words>span:nth-child(2){transition-delay:.04s}.tbx-1088__words>span:nth-child(3){transition-delay:.08s}
.tbx-1088__asterisk{font-size:15px;margin-left:9px;display:inline-block;vertical-align:middle;color:#b0643d;transition:transform .5s}
.tbx-1088__bottom{font-size:10px;font-weight:800;letter-spacing:.12em;border-top:1px solid #b7aa97;padding-top:10px;display:flex;justify-content:space-between}
.tbx-1088:is(:hover,:focus-visible) .tbx-1088__words>span{transform:translateX(12px) translateY(-3px);color:#b15f3b}.tbx-1088:is(:hover,:focus-visible) .tbx-1088__asterisk{transform:rotate(90deg)}
.tbx-1088:focus-visible{outline:3px solid #b56942;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1088 *, .tbx-1088__words>span{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 に対応。