Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1217"><a href="#demo-1217" class="tbx-1217-plate"><span class="tbx-1217-kicker">EXPERIENCE OUR WORK</span><span class="tbx-1217-name">View the studio <b aria-hidden="true">↗</b></span></a></div>CSS
.tbx-1217{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1217{display:grid;place-items:center;min-height:200px;width:100%;padding:22px;background:#e2dcd0;font-family:Arial,sans-serif}.tbx-1217 *{box-sizing:border-box}.tbx-1217-plate{display:flex;flex-direction:column;justify-content:center;gap:9px;width:min(100%,280px);min-height:95px;padding:19px 22px;border-radius:11px;background:#f6f0e5;color:#55473b;text-decoration:none;box-shadow:8px 8px 15px #a7a09299,-7px -7px 14px #ffffffb0,inset 0 0 0 transparent;transform:translateY(-2px);transition:transform .38s,box-shadow .38s,background .38s}.tbx-1217-kicker{font-size:9px;font-weight:700;letter-spacing:.19em;color:#8b7766}.tbx-1217-name{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:800;letter-spacing:-.035em}.tbx-1217-name b{font-weight:400;font-size:21px;transition:transform .38s}.tbx-1217-plate:is(:hover,:focus-visible){transform:translateY(2px);background:#e9e1d6;box-shadow:inset 7px 7px 10px #b9b0a3,inset -5px -5px 9px #ffffffcc,0 0 0 1px #c7b7a0}.tbx-1217-plate:is(:hover,:focus-visible) .tbx-1217-name b{transform:translate(3px,-3px)}.tbx-1217-plate:focus-visible{outline:3px solid #ab6335;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1217 *, .tbx-1217 *::before,.tbx-1217 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
CTA, Corporate
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。