<div class="container">
  <div class="horizontal">
    <div class="verticals twelve">
      <h1>Force Framework pagination style</h1>
    </div>
  </div>
  
  <div class="horizontal">
    <div class="verticals twelve">
      
      <div class="pagination m-t-20">
        <a href="#">«</a>
        <a href="#">‹</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">›</a>
        <a href="#">»</a>
      </div>
      
      <div class="pagination m-t-20">
        <a href="#">First</a>
        <a href="#">Prev</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">Next</a>
        <a href="#">Last</a>
      </div>
      
      <div class="pagination m-t-20">
        <a href="#">Prev</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">Next</a>
      </div>
      
      <div class="pagination pagination-style-one m-t-20">
        <a href="#">«</a>
        <a href="#">‹</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">›</a>
        <a href="#">»</a>
      </div>
      
      <div class="pagination pagination-style-two m-t-20">
        <a href="#">First</a>
        <a href="#">Prev</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">Next</a>
        <a href="#">Last</a>
      </div>
      
      <div class="pagination pagination-style-three m-t-20 m-b-40">
        <a href="#">Prev</a>
        <a href="#" class="selected">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">Next</a>
      </div>
    </div>
  </div>
</div>

h1 { text-align: center; margin-top: 30px; margin-bottom: 50px; }

.pagination-style-one a { padding: 7px; background: #135fb4; color: #ffffff; border-radius: 50%; box-shadow: 0px 5px 10px 0px rgba(0,0,0,.1);}
.pagination-style-one a.selected, .pagination-style-one a:hover, .pagination-style-one a:active, .pagination-style-one a:focus { padding: 12px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,.5);}

.pagination-style-two a { padding: 7px 15px; background: #ff6407; color: #ffffff; border-radius: 5px 25px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,.1);}
.pagination-style-two a.selected, .pagination-style-two a:hover, .pagination-style-two a:active, .pagination-style-two a:focus { padding: 15px; }

.pagination-style-three a { padding: 5px 15px; background: #ffffff; color: #ff6407; border-radius: 25px; box-shadow: 0px 5px 10px 0px rgba(0,0,0,.1);}

.pagination-style-three a.selected, .pagination-style-three a:hover, .pagination-style-three a:active, .pagination-style-three a:focus { background: #ff6407; }

// Pagination plugin - Force Framework 
// Author: Force Framework
// Created Date: 20/08/2018
// Modified Date: 15/12/2023
// Website: https://letsforce.com/
// #ForceFramework