Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1022" type="button"><span class="tbx-1022__label">OUR SERVICE</span><span class="tbx-1022__title">ブランドデザイン</span><span class="tbx-1022__detail">企画から制作まで、一貫して支援します。</span><span class="tbx-1022__arrow" aria-hidden="true">↗</span></button>
CSS
.tbx-1022{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:min(232px,100%);min-height:153px;padding:22px 20px;overflow:hidden;border:1px solid #bdd5e1;border-radius:8px;background:#e4f1f5;color:#16405b;text-align:left;cursor:pointer}
.tbx-1022__label{font:700 9px/1.5 system-ui;letter-spacing:.17em;color:#488298}.tbx-1022__title{margin-top:8px;font:750 16px/1.3 system-ui;transition:transform .33s ease}.tbx-1022__detail{display:block;margin-top:7px;max-width:180px;font:500 11px/1.5 system-ui;opacity:0;transform:translateY(15px);transition:opacity .33s ease,transform .33s ease}.tbx-1022__arrow{position:absolute;top:15px;right:18px;font:22px system-ui}
.tbx-1022:is(:hover,:focus-visible) .tbx-1022__title{transform:translateY(-6px)}
.tbx-1022:is(:hover,:focus-visible) .tbx-1022__detail{opacity:1;transform:translateY(0)}
.tbx-1022:focus-visible{outline:3px solid #7b65db;outline-offset:4px}
@media(hover:none){.tbx-1022__detail{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tbx-1022__title,.tbx-1022__detail{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
業務案内・制作実績・コラム紹介
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。