パーツ番号 11-01-06 ・ CSSのみ

ページネーション

番号のホバーやアクティブで背景がふわっと変化する前後矢印付きページ送り。WordPressの記事一覧ページに最適です。

hovercss

プレビュー

ソースコード

HTML

<nav class="pager" aria-label="ページ送り">
          <a href="#!" class="pg pg-arrow" aria-label="前のページ">&lsaquo;</a>
          <a href="#!" class="pg">1</a>
          <a href="#!" class="pg current" aria-current="page">2</a>
          <a href="#!" class="pg">3</a>
          <span class="pg-dots">&hellip;</span>
          <a href="#!" class="pg">9</a>
          <a href="#!" class="pg pg-arrow" aria-label="次のページ">&rsaquo;</a>
        </nav>

CSS

.d11-01-06 .pager{display:flex;align-items:center;gap:8px}
        .d11-01-06 .pg{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid #e2e6ee;color:#4a5268;font-size:13px;font-weight:600;text-decoration:none;transition:background .3s,color .3s,border-color .3s,transform .25s,box-shadow .3s}
        .d11-01-06 .pg:hover{background:#eef0ff;border-color:#c3caff;color:#5b6bff;transform:translateY(-2px);box-shadow:0 4px 10px rgba(91,107,255,.18)}
        .d11-01-06 .pg.current{background:#5b6bff;border-color:#5b6bff;color:#fff;box-shadow:0 4px 12px rgba(91,107,255,.4)}
        .d11-01-06 .pg.current:hover{transform:none}
        .d11-01-06 .pg-arrow{font-size:18px;padding-bottom:2px}
        .d11-01-06 .pg-dots{color:#9aa1b5;font-size:13px;letter-spacing:1px}

クラス名 .d11-01-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。