Pagination styles in CSS3

How to create pagination styles using pagination in CSS

Pagination

When the website is with many pages, we use pagination to create pages in a single page, it is the process of dividing a document into discrete pages, either electronic pages or printed pages.

Simple pagination

  <style>
        ul.pagination {
            display: inline-block;
        }
            ul.pagination li {
                display: inline-block;
            }
                ul.pagination li a {
                    color: green;
                    float: left;
                    padding: 8px 16px;
                    text-decoration: none;
                }
    </style>
</head>
<body>
    <p><i>Simple Pagination</i></p>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

In the above code snippet we have defined simple pagination, we created list of items by using ul elements, we have created pagination effect for list items

ul(pagination) to display unordered list inline
ul{pagination }- It displays the li values in the ul in inline
ul pagination a{} -It displays the hover effect when the mouse is placed on the list by giving anchor tag with properties as float, textdecoration, color and padding

output

Bordered pagination with hover effect

It creates pagination with borders

 <style>
        ul.pagination {
            display: inline-block;
        }

            ul.pagination li {
                display: inline;
            }

                ul.pagination li a {
                    color: black;
                    float: left;
                    padding: 8px 16px;
                    text-decoration: none;
                    border: 1px solid red;
                }

                    ul.pagination li a.active {
                        background-color: pink;
                        color: white;
                        border: 1px solid yellow;
                    }

                    ul.pagination li a:hover:not(.active) {
                        background-color:red;
                    }
    </style>
</head>
<body>
    <p>Bordered Pagination</p>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">TechFunda</a></li>
        <li><a href="#">2</a></li>
        <li><a class="active" href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">DotNetFunda</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

Bordered pagination

In the above code snippet we have defined the bordered pagination with hover effect, when the mouse is placed on the list it displays the background color and one list is set as active with displays the list as active with background color as pink and the hover not is used to create the when the mouse is placed on the active it does not change the color and background color, border ois used to create border in the pagination of li element

output

Rounded borders

We use border radius property to cvreate border as rounded

 <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

            ul.pagination li {
                display: inline;
            }

                ul.pagination li a {
                    color: black;
                    float: left;
                    padding: 8px 16px;
                    text-decoration: none;
                    transition: background-color .3s;
                    border: 1px solid orange;
                }

        .pagination li:first-child a {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }

        .pagination li:last-child a {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        ul.pagination li a.active {
            background-color: green;
            color: white;
            border: 1px solid red;
        }

        ul.pagination li a:hover:not(.active) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>Pagination with Rounded Borders</h2>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">TechFunda</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">ITFunda</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">DotNetFunda</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">KidsFunda</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

Rounded borders

In the above code snippet we have defined the border as rounded by using property as border radius to first child element and last child element

output

Space between borders

We can create space between borders using margin property

ul.pagination li a{margin(0, 5px)}

In the above code snippet margin property to provide space between borders

<style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
            ul.pagination li {
                display: inline;
            }
                ul.pagination li a {
                    color: black;
                    float: left;
                    margin:0 5px;
                    padding: 8px 16px;
                    text-decoration: none;
                    transition: background-color .3s;
                    border: 1px solid orange;
                }
        .pagination li:first-child a {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .pagination li:last-child a {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        ul.pagination li a.active {
            background-color: green;
            color: white;
            border: 1px solid red;
        }
        ul.pagination li a:hover:not(.active) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>Space between Rounded Borders</h2>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">TechFunda</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">ITFunda</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">DotNetFunda</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">KidsFunda</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

Space between borders

In the above code snippet we have defined space between border by using margin property in the pagination

output

Pagination size

It creates size of the text in the pagination by using font-size property

 <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
            ul.pagination li {
                display: inline;
            }
                ul.pagination li a {
                    font-size:30px;
                    color: black;
                    float: left;
                    margin:0 5px;
                    padding: 8px 16px;
                    text-decoration: none;
                    transition: background-color .3s;
                    border: 1px solid orange;
                }
        .pagination li:first-child a {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .pagination li:last-child a {
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        ul.pagination li a.active {
            background-color: green;
            color: white;
            border: 1px solid red;
        }
        ul.pagination li a:hover:not(.active) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <h2>Space between Rounded Borders</h2>
    <ul class="pagination">
        <li><a href="#">«</a></li>
        <li><a href="#">TechFunda</a></li>
        <li><a class="active" href="#">2</a></li>
        <li><a href="#">ITFunda</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">DotNetFunda</a></li>
        <li><a href="#">6</a></li>
        <li><a href="#">KidsFunda</a></li>
        <li><a href="#">»</a></li>
    </ul>
</body>

Pagination size

In the above code snippet we have defined the pagination size by using property fontsize in the ul element of pagination

output

Pagination center

It creates pagination center by using property text align center

<style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
            ul.pagination li {
                display: inline;
            }
                ul.pagination li a {
                    color: black;
                    float: left;
                    padding: 8px 16px;
                    text-decoration: none;
                    transition: background-color .3s;
                    border: 1px solid #ddd;
                }
                    ul.pagination li a.active {
                        background-color: #4CAF50;
                        color: white;
                        border: 1px solid #4CAF50;
                    }
                    ul.pagination li a:hover:not(.active) {
                        background-color: #ddd;
                    }
        div.center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Centered Pagination</h2>
    <div class="center">
        <ul class="pagination">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">»</a></li>
        </ul>
    </div>
</body>

Pagination center

In the above code snippet we have defined pagination to center by using text align property to center in the div section , we have the property in the div element to centers the pagination

output