CSS Pagination

                             CSS Pagination

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Pagination</title>

</head>

<style>

    .pagination {

        display: inline-block;

    }

    .pagination a {

        color: black;

        float: left;

        text-decoration:none;

        font-size: 40px; /*Use font size to change the pagination size */

        padding: 10px 13px;

        margin: 3px;

        /* border-radius: 6px; */

        border: 1px solid crimson;

        transition: background-color 0.8s; /*Adding transition effects on hover*/

        

    }

    .pagination a.active {

        background-color: rgb(95, 218, 95);

        /* border-radius: 8px; */

    }

    .pagination a:hover:not(.active) {

        background-color: #555dc2;

    }

    .pagination a:first-child {

        border-top-left-radius: 6px;

        border-bottom-left-radius: 5px;

    }

    .pagination a:last-child {

        border-top-right-radius: 6px;

        border-bottom-right-radius: 6px;

    }

    .center {

        text-align: center;

    }

</style>

<body>

    <div class="center">

    <div class="pagination">

        <a href=""><<</a>

        <a href="">1</a>

        <a href="">2</a>

        <a href="">3</a>

        <a class="active" href="">4</a>

        <a href="">5</a>

        <a href="">6</a>

        <a href="">>></a>

    </div>

</div>

</body>

</html>

Breadcrumb......