Border pagination with hover effect example

Write code here

J | B | A

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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>
</html>

Note: We DO NOT save your trial code in our database.

Border Pagination With Hover Effect

Write code here

Output