Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#service" class="tbx-1104"><span class="tbx-1104__main"><small>OUR SERVICES / 02</small><span class="tbx-1104__symbol" aria-hidden="true">✦</span><strong>事業を支える<br>技術サポート</strong><span class="tbx-1104__intro">相談から運用までを一貫支援</span></span><span class="tbx-1104__rail"><small>SUPPORT</small><b aria-hidden="true">↗</b><span>MORE</span></span></a>
CSS
.tbx-1104{display:flex;width:min(285px,100%);height:188px;border:1px solid #c3d0d9;background:#f5f8fa;color:#2b4b60;text-decoration:none;font-family:system-ui,sans-serif;overflow:hidden;border-radius:9px;transition:box-shadow .3s}
.tbx-1104__main{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 14px}.tbx-1104__main small{font-size:9px;letter-spacing:.11em;font-weight:700;color:#69899c}.tbx-1104__symbol{font-size:27px;color:#cb8e6c;margin:12px 0 3px;transition:transform .5s}.tbx-1104__main strong{font-size:15px;line-height:1.4}.tbx-1104__intro{font-size:9px;color:#7f98a5;margin-top:7px}
.tbx-1104__rail{width:32px;background:#dbe7ed;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:13px 8px;overflow:hidden;transition:width .44s cubic-bezier(.2,.8,.2,1),background .4s;color:#306179}
.tbx-1104__rail small{font-size:8px;font-weight:800;letter-spacing:.12em;writing-mode:vertical-rl;transform:rotate(180deg)}.tbx-1104__rail b{font-size:23px;font-weight:400}.tbx-1104__rail span{font-size:9px;font-weight:750;letter-spacing:.05em;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.tbx-1104:is(:hover,:focus-visible){box-shadow:0 9px 23px #284c661c}.tbx-1104:is(:hover,:focus-visible) .tbx-1104__rail{width:73px;background:#c3dfe6}.tbx-1104:is(:hover,:focus-visible) .tbx-1104__rail span{opacity:1;transform:translateY(0)}.tbx-1104:is(:hover,:focus-visible) .tbx-1104__symbol{transform:rotate(40deg)}
.tbx-1104:focus-visible{outline:3px solid #9bc9d4;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1104 *,.tbx-1104{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。