Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1077" href="#service" aria-label="ブランド戦略サービスの詳細を見る"><span class="tbx-1077__num">03<span aria-hidden="true">↗</span></span><small>SERVICE</small><strong>Brand<br>Strategy</strong><span class="tbx-1077__rule" aria-hidden="true"></span><p>ブランドの価値を伝える設計。</p></a>
CSS
.tbx-1077{width:min(262px,100%);min-height:180px;position:relative;display:block;background:#f4e9db;padding:27px 24px 18px;border:1px solid #d8c5aa;text-decoration:none;color:#42352e;font:12px/1.4 system-ui,sans-serif;transition:background .32s,box-shadow .32s}
.tbx-1077__num{position:absolute;right:17px;top:-9px;display:flex;gap:11px;align-items:center;background:#9f533c;color:white;padding:11px 11px 9px;font:750 20px/1 system-ui,sans-serif;box-shadow:3px 4px 0 #543b2942;transition:transform .33s,background .33s}
.tbx-1077__num span{font-size:14px;font-weight:400}.tbx-1077 small{font-size:9px;color:#99614b;letter-spacing:.17em;font-weight:800}
.tbx-1077 strong{display:block;font-size:25px;line-height:1.05;margin-top:12px;letter-spacing:-.035em}.tbx-1077__rule{display:block;height:2px;width:32px;background:#ac7652;margin-top:15px;transition:width .35s}
.tbx-1077 p{font-size:10px;color:#7c6a5c;margin:10px 0 0}
.tbx-1077:is(:hover,:focus-visible){background:#fff8ee;box-shadow:0 12px 24px #6c493527}.tbx-1077:is(:hover,:focus-visible) .tbx-1077__num{transform:translate(4px,-10px);background:#bd714c}.tbx-1077:is(:hover,:focus-visible) .tbx-1077__rule{width:90%}
.tbx-1077:focus-visible{outline:3px solid #cb8e65;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1077,.tbx-1077 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。