How To Create an Active Class in pagination In CSS

Posted By Bajarangi soft , Posted On 30-09-2020

Learn how to create a responsive pagination using CSS,Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them,Add rounded borders to your first and last link in the pagination:

1.CSS Pagination Example-1

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
        }

        .pagination {
            display: inline-block;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
    <div class="pagination">
        <a href="siri.html">&laquo;</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="#">&raquo;</a>
    </div>
</div>

</body>
</html>

2.CSS Pagination Example-2

<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination {
            display: inline-block;
        }

        .pagination a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            font-size: 22px;
        }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>
<body>

<h2>Pagination Size</h2>
<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
    <a href="#">&laquo;</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="#">&raquo;</a>
</div>

</body>
</html>

3.CSS Hoverable Pagination Example-3

<!DOCTYPE html>
<html>
<head>
    <style>
        .pagination1 {
            display: inline-block;
        }

        .pagination1 a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            transition: background-color .3s;
        }

        .pagination1 a.active {
            background-color: #4CAF50;
            color: white;
        }

        .pagination1 a:hover:not(.active) {background-color: #ddd;}
    </style>
</head>
<body>

<h2>Transition Effect on Hover</h2>
<p>Move the mouse over the numbers.</p>

<div class="pagination1">
    <a href="#">&laquo;</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="#">&raquo;</a>
</div>

</body>
</html>

Related Post

How To Create Simple Customizing Pagination In Laravel
What Are The Basic Usage Of Pagination Using Laravel
How Do you Make an Animation In Css
How To Create an Active Class in pagination In CSS
Does Css Support multiple Columns To Write in Html Page
What Is Mean By User Interface in CSS
Which Class Is Used For Pagination In Bootstrap
How To Create Customize Responsive Pagination Using CSS