Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1083" href="#article" aria-label="制作ノートの記事を読む"><span class="tbx-1083__flip"><span class="tbx-1083__front">DESIGN NOTE</span><span class="tbx-1083__back">2026 / 10</span></span><span class="tbx-1083__title">読みやすさを作る余白の考え方</span><span class="tbx-1083__arrow" aria-hidden="true">↗</span></a>
CSS
.tbx-1083{width:min(293px,100%);display:grid;grid-template-columns:1fr 20px;gap:13px;background:#fff;padding:19px 18px;border:1px solid #dce3e7;border-radius:8px;color:#294c5c;text-decoration:none;font:12px/1.4 system-ui,sans-serif;transition:box-shadow .3s}
.tbx-1083__flip{grid-column:1;position:relative;display:block;width:123px;height:30px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.tbx-1083__front,.tbx-1083__back{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border:1px solid #b0c8cd;color:#396a76;letter-spacing:.09em;font-size:9px;font-weight:800;border-radius:3px}
.tbx-1083__back{transform:rotateY(180deg);background:#416e7b;color:#fff;border-color:#416e7b}
.tbx-1083__title{grid-column:1;grid-row:2;font-size:13px;font-weight:750}.tbx-1083__arrow{grid-column:2;grid-row:2;font-size:22px;align-self:end;transition:transform .35s}
.tbx-1083:is(:hover,:focus-visible){box-shadow:0 12px 26px #2a536a17}.tbx-1083:is(:hover,:focus-visible) .tbx-1083__flip{transform:rotateY(180deg)}.tbx-1083:is(:hover,:focus-visible) .tbx-1083__arrow{transform:translate(3px,-3px)}
.tbx-1083:focus-visible{outline:3px solid #ceaf79;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1083,.tbx-1083 *{transition:none!important}.tbx-1083:is(:hover,:focus-visible) .tbx-1083__flip{transform:none}.tbx-1083:is(:hover,:focus-visible) .tbx-1083__front{opacity:0}.tbx-1083:is(:hover,:focus-visible) .tbx-1083__back{transform:none;opacity:1}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Blog / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。