Pagination

In fact, paginations are button groups that are customized for their special purpose: showing page numbers.
So before continue first read about buttons and button groups.

Active and static buttons

To indicate active page number add the .active class to the .button.
Sometimes there are parts of the pagination that should not be clickable/focusable however they are like buttons, .static class will help you have this kind of element inside pagination.

index.html

<div class="button-group">
  <a href="#" class="button bordered">First</a>
  <a href="#" class="button bordered">12</a>
  <a href="#" class="button bordered active style-accent">13</a>
  <a href="#" class="button bordered">14</a>
  <a href="#" class="button bordered">Last</a>
</div>

<div class="button-group">
  <a class="button disabled">Previous</a>
  <a href="#" class="button">1</a>
  <a href="#" class="button">2</a>
  <a href="#" class="button">3</a>
  <a href="#" class="button">Next</a>
</div>

<div class="button-group">
  <a href="#" class="button">1</a>
  <a href="#" class="button active">2</a>
  <a href="#" class="button">3</a>
  <span class="button static">...</span>
  <a href="#" class="button">97</a>
  <a href="#" class="button">98</a>
  <a href="#" class="button">99</a>
</div>

<div class="flex-center">
  <span class="push-left">1 from 99</span>
  <div class="button-group">
    <a href="#" class="button active">1</a>
    <a href="#" class="button">2</a>
    <a href="#" class="button">3</a>
    <span class="button static">...</span>
    <a href="#" class="button">97</a>
    <a href="#" class="button">98</a>
    <a href="#" class="button">99</a>
  </div>
</div>