CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Pagination (Page Number)

With CSS you can create many kind of pagination effects that may help you to design your website.

In this tutorial you will cover about the following pagination effect properties.

  • :hover selector : this property used to change the color of each page link when moving the mouse over them:
  • border-radius: this property used if you want a rounded "active" and "hover" button.
  • transition : this property used to the page links to create a transition effect on hover
  • border : this property used to add borders to the pagination
  • font-size : this property used the size of the pagination
  • width :this property used to change the width of a button
  • border : this property used to create a bordered button group

  • Example : Pagination

    <!DOCTYPE html>
    .pagination {
    display: inline-block;
    .pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    .pagination {
    background-color: blue;
    color: white;
    border: 1px solid red;
    .pagination a:hover:not(.active) {background-color: yellow;}

    <p>Webpage Number with Boarder.</p>
    <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">»</a>

    When the above code is compiled , it produces the following result.


    Webpage Number with Boarder.