Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1219"><a href="#demo-1219" class="tbx-1219-link"><span class="tbx-1219-en">OUR PHILOSOPHY</span><span class="tbx-1219-jp">私たちの考え方 <span aria-hidden="true">↗</span></span><span class="tbx-1219-line" aria-hidden="true"></span></a></div>CSS
.tbx-1219{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1219{display:grid;place-items:center;min-height:200px;width:100%;padding:22px;background:#efece8;font-family:Arial,sans-serif}.tbx-1219 *{box-sizing:border-box}.tbx-1219-link{position:relative;width:min(100%,300px);display:grid;gap:12px;padding:18px 9px 14px;color:#182e35;text-decoration:none;outline-offset:5px}.tbx-1219-en{font-family:Georgia,serif;font-size:21px;font-weight:700;letter-spacing:-.025em;transform:translateY(10px);transition:transform .4s}.tbx-1219-jp{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.18em;opacity:.14;transform:translateY(11px);transition:transform .4s,opacity .4s}.tbx-1219-jp span{font-size:19px}.tbx-1219-line{height:2px;background:linear-gradient(90deg,#a85c4c 0 50%,#e1c5bb 50%);transform-origin:left;transform:scaleX(.25);transition:transform .48s}.tbx-1219-link:is(:hover,:focus-visible) .tbx-1219-en,.tbx-1219-link:is(:hover,:focus-visible) .tbx-1219-jp{transform:translateY(0)}.tbx-1219-link:is(:hover,:focus-visible) .tbx-1219-jp{opacity:1}.tbx-1219-link:is(:hover,:focus-visible) .tbx-1219-line{transform:scaleX(1)}.tbx-1219-link:focus-visible{outline:2px solid #a85c4c}
@media(prefers-reduced-motion:reduce){.tbx-1219 *, .tbx-1219 *::before,.tbx-1219 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial, International
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。