Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<nav class="tbx-1166" aria-label="ページ送り"><a href="#page1" aria-label="1ページ目">01</a><a class="tbx-1166__current" href="#page2" aria-label="2ページ目（現在）" aria-current="page">02</a><a href="#page3" aria-label="3ページ目">03</a><a class="tbx-1166__next" href="#next" aria-label="次のページ">→</a></nav>
CSS
.tbx-1166{box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:14px;border:1px solid #d5d5d1;background:#f7f6f2;border-radius:10px;font-family:system-ui,sans-serif}.tbx-1166 a{position:relative;display:grid;place-items:center;width:40px;height:43px;border-radius:5px;text-decoration:none;background:#fff;border:1px solid #d5d9d4;color:#445651;font:850 12px system-ui,sans-serif;box-shadow:2px 2px 0 #e1e3de;transform-style:preserve-3d;transition:transform .36s cubic-bezier(.2,.8,.2,1),box-shadow .36s,background .25s}.tbx-1166 a::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 56%,#d4e5dc 57%,#f3f6ef 100%);border-radius:inherit;clip-path:polygon(100% 0,100% 100%,68% 100%);transform-origin:right top;transform:scaleX(0);transition:transform .32s;pointer-events:none}.tbx-1166 .tbx-1166__current{background:#335b50;color:#fff;border-color:#335b50}.tbx-1166 .tbx-1166__next{font-size:19px}.tbx-1166 a:is(:hover,:focus-visible){transform:translateY(-6px) rotateY(-9deg) scale(1.11);background:#c6e2d4;border-color:#7fae9b;color:#234e3e;box-shadow:5px 8px 0 #dbe2d9}.tbx-1166 a:is(:hover,:focus-visible)::after{transform:scaleX(1)}.tbx-1166 a:focus-visible{outline:2px solid #3e8b70;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1166, .tbx-1166 *, .tbx-1166::before, .tbx-1166::after, .tbx-1166 *::before, .tbx-1166 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Pagination / Article
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。