Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1094" aria-label="作品カテゴリー"><a href="#architecture"><span class="tbx-1094__text"><small>01 / ARCHITECTURE</small><strong>建築</strong></span><span class="tbx-1094__art" aria-hidden="true"><i class="tbx-1094__sketch"></i></span><span class="tbx-1094__go" aria-hidden="true">↗</span></a><a href="#interior"><span class="tbx-1094__text"><small>02 / INTERIOR</small><strong>インテリア</strong></span><span class="tbx-1094__art tbx-1094__art--b" aria-hidden="true"><i class="tbx-1094__sketch"></i></span><span class="tbx-1094__go" aria-hidden="true">↗</span></a></nav>
CSS
.tbx-1094{width:min(286px,100%);background:#fff;border:1px solid #dfe3dc;padding:9px 12px;font-family:system-ui,sans-serif}
.tbx-1094 a{position:relative;display:flex;align-items:center;height:100px;gap:10px;padding:12px 5px;border-bottom:1px solid #dddcd5;text-decoration:none;color:#34483e;overflow:hidden}.tbx-1094 a:last-child{border:0}
.tbx-1094__text{display:flex;flex-direction:column;gap:9px;position:relative;z-index:2}.tbx-1094__text small{font-size:9px;font-weight:750;color:#899a8b;letter-spacing:.07em}.tbx-1094__text strong{font-size:21px;line-height:1;letter-spacing:.03em;transition:transform .32s}
.tbx-1094__art{position:absolute;right:27px;top:12px;width:77px;height:72px;background:linear-gradient(145deg,#c5cfca,#92aca5);transform:translateY(22px) rotate(-8deg) scale(.7);opacity:0;transition:transform .4s,opacity .3s;overflow:hidden}
.tbx-1094__sketch{position:absolute;inset:15px 14px 0;background:#e7ebdf;clip-path:polygon(0 20%,50% 0,100% 20%,100% 100%,0 100%)}.tbx-1094__sketch:after{content:"";position:absolute;left:22px;top:22px;width:24px;height:42px;background:#72928c}
.tbx-1094__art--b{background:linear-gradient(145deg,#d8bd97,#8c998d)}.tbx-1094__go{margin-left:auto;position:relative;z-index:2;font-size:19px;transition:transform .3s}
.tbx-1094 a:is(:hover,:focus-visible) .tbx-1094__text strong{transform:translateX(5px)}.tbx-1094 a:is(:hover,:focus-visible) .tbx-1094__art{transform:translateY(0) rotate(0) scale(1);opacity:1}.tbx-1094 a:is(:hover,:focus-visible) .tbx-1094__go{transform:translate(3px,-3px)}
.tbx-1094 a:focus-visible{outline:3px solid #d2a46a;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.tbx-1094 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。