CSS | Pagination - GeeksforGeeks

04 Dec, 2018
Pagination is the process of dividing the document into pages and providing them with numbers.Types of Pagination: There are many types of pagination in CSS. Some of them are given below:
Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition EffectBordered PaginationRounded Border PaginationCentered PaginationSpace between PaginationPagination Size
Simple Pagination
Active and Hoverable Pagination
Rounded Active and Hoverable Buttons
Hoverable Transition Effect
Bordered Pagination
Rounded Border Pagination
Centered Pagination
Space between Pagination
Pagination Size
Simple Pagination: This is the basic form of pagination.Syntax:
.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration:type
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}  .pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:140px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Simple Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Active and Hoverable Pagination: In this pagination, by using the active class the current page will be highlighted. Hover will change the color of the page link when the mouse moves over them.Syntax:
.pagination body.active {
    display:type
    background-color:colorname
}
.pagination body:hover:not(.active) {
    background-color:colorname
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}  .pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}.pagination a.active {        background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:90px;    margin-bottom:20px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Active and Hoverable Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a class = "active" href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Rounded Active and Hoverable Buttons: For rounded active and hoverable buttons just add border-radius property.Syntax:
.pagination body.active {
    display:type
    background-color:colorname
    border-radius:size
}
.pagination body:hover:not(.active) {
    background-color:colorname
    border-radius:size
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}  .pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}.pagination a.active {    border-radius:5px;        background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;    border-radius:5px;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:40px;    margin-bottom:20px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Rounded Active and Hoverable Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a class = "active" href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Hoverable Transition Effect: Transition property is added to create a transition effect on hover.Syntax:
.pagination body:hover {
    transition:type
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}  .pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:40px;    margin-bottom:20px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Hoverable Transition Effect Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a class = "active" href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Bordered Pagination: In this type of pagination a border is added to the pagination. Use border property to add borders to the pagination.Syntax:
.pagination body {
    border:type
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}.pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;    border:1px solid black;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:140px;    margin-bottom:20px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Bordered Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a class = "active" href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Rounded Border Pagination: Border can be rounded using border-radius property.Syntax:
.pagination body {
    border:type
    border-radius:size
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}.pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;    border-radius:5px;    border:1px solid black;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    margin-left:100px;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-left:110px;    margin-bottom:20px;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Rounded Border Pagination</div><div class="pagination">  <a href="#">«</a>  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a>  <a href="#">4</a>  <a class = "active" href="#">5</a>  <a href="#">6</a>  <a href="#">7</a>  <a href="#">8</a>  <a href="#">9</a>  <a href="#">10</a>  <a href="#">»</a></div>  </body></html>
Output:
Centered Pagination: Pagination can be centered by using text-align property.Syntax:
.center {
    text-align:center
}
.pagination body {
    color:colorname
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}.center {    text-align:center;}.pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;    border:1px solid black;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    text-align:center;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-bottom:20px;    text-align:center;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Centered Pagination</div><div class = "center">  <div class="pagination">    <a href="#">«</a>    <a href="#">1</a>    <a href="#">2</a>    <a href="#">3</a>    <a href="#">4</a>    <a class = "active" href="#">5</a>    <a href="#">6</a>    <a href="#">7</a>    <a href="#">8</a>    <a href="#">9</a>    <a href="#">10</a>    <a href="#">»</a>  </div></div>  </body></html>
Output:
Space Between Pagination: Page links can be spaced if you do not want to group them. Use margin property to provide space between the links.
Syntax:
.pagination body {
    color:colorname
    margin:type
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}.center {    text-align:center;}.pagination a {    font-weight:bold;    font-size:20px;    color: black;    float: left;    margin:0px 5px;    padding: 8px 16px;    text-decoration: none;    border:1px solid black;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    text-align:center;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-bottom:20px;    text-align:center;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Space Between Pagination</div><div class = "center">  <div class="pagination">    <a href="#">«</a>    <a href="#">1</a>    <a href="#">2</a>    <a href="#">3</a>    <a href="#">4</a>    <a class = "active" href="#">5</a>    <a href="#">6</a>    <a href="#">7</a>    <a href="#">8</a>    <a href="#">9</a>    <a href="#">10</a>    <a href="#">»</a>  </div></div>  </body></html>
Output:
Pagination Size: The size of the pagination can be changed using font-size property.
Syntax:
.pagination body {
    color:colorname
    font-size:size
}

Example:
<!DOCTYPE html><html><head><style>.pagination {    display: inline-block;}.center {    text-align:center;}.pagination a {    font-weight:bold;    font-size:25px;    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;    border:1px solid black;}.pagination a.active {    background-color:#009900;}.pagination a:hover:not(.active) {    background-color: #d4d5d2;}.GFG {    font-size:42px;    font-weight:bold;    color:#009900;    text-align:center;    margin-bottom:60px;}.peg {    font-size:24px;    font-weight:bold;    margin-bottom:20px;    text-align:center;}</style></head><body>  <div class = "GFG">GeeksforGeeks</div><div class = "peg">Pagination Size</div><div class = "center">  <div class="pagination">    <a href="#">«</a>    <a href="#">1</a>    <a href="#">2</a>    <a href="#">3</a>    <a href="#">4</a>    <a class = "active" href="#">5</a>    <a href="#">6</a>    <a href="#">7</a>    <a href="#">8</a>    <a href="#">9</a>    <a href="#">10</a>    <a href="#">»</a>  </div></div>  </body></html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Advanced
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property