Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1092" href="#planning"><span class="tbx-1092__corner" aria-hidden="true">+</span><small>02 / DESIGN SERVICE</small><strong>Spatial<br>Planning</strong><p>空間の使い方を、機能と美しさの両面から設計する。</p><span class="tbx-1092__footer">DISCOVER <span aria-hidden="true">↗</span></span></a>
CSS
.tbx-1092{position:relative;display:flex;flex-direction:column;width:min(270px,100%);min-height:205px;overflow:hidden;padding:21px 21px 15px;background:#193746;color:#f8f4ea;text-decoration:none;font-family:system-ui,sans-serif;border:1px solid #53727b;isolation:isolate}
.tbx-1092:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#a8d6d11f 1px,transparent 1px),linear-gradient(#a8d6d11f 1px,transparent 1px);background-size:19px 19px;opacity:0;transform:scale(1.04);transition:opacity .42s,transform .42s;pointer-events:none}
.tbx-1092:after{content:"";position:absolute;inset:10px;border:1px solid #9cdbd3;transform:scaleX(.4);transform-origin:right;opacity:0;transition:transform .42s,opacity .42s;pointer-events:none}
.tbx-1092 small,.tbx-1092 strong,.tbx-1092 p,.tbx-1092__footer,.tbx-1092__corner{position:relative;z-index:1}.tbx-1092 small{font-size:9px;color:#83bab4;font-weight:700;letter-spacing:.12em}.tbx-1092 strong{font:600 30px/1.08 Georgia,serif;letter-spacing:-.04em;margin:12px 0 9px}.tbx-1092 p{font-size:10px;line-height:1.5;color:#b4c4c5;margin:0 0 12px}.tbx-1092__footer{margin-top:auto;border-top:1px solid #6f8b91;padding-top:10px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;font-weight:650}.tbx-1092__footer span{font-size:17px}
.tbx-1092__corner{position:absolute;top:12px;right:16px;color:#83bab4;font-size:25px;font-weight:200;transition:transform .4s}
.tbx-1092:is(:hover,:focus-visible):before{opacity:1;transform:scale(1)}.tbx-1092:is(:hover,:focus-visible):after{opacity:1;transform:scaleX(1)}.tbx-1092:is(:hover,:focus-visible) .tbx-1092__corner{transform:rotate(90deg)}
.tbx-1092:focus-visible{outline:3px solid #e5ad70;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1092,.tbx-1092:before,.tbx-1092:after,.tbx-1092 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Architecture
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。