← All elements
<div class="pn2"><a>‹</a><span>Page <b>3</b> of 12</span><a>›</a></div>About this navigation bar
Rounded previous and next buttons around a page indicator, with arrows drawn from borders and a pressed state.
How it works
Two rounded buttons with arrow characters sit either side of a page indicator. Hover fills the button with the accent colour and shadow, and active scales it down slightly.
Ways to customise it
- Edit the numbers.
- Change the orange accent.
- Add numbered page links between them.
Good to know
Use real links with aria-labels such as Previous page. Disable the first and last states properly.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.