content logo

Bootstrap Paginations:

Animating Bootstrap Pagination with Hover Effect

It is also more attractive for visitors to your website to use different style paginations. In this post, we have prepared one of these paginations. This pagination has blue numbers. Each item that is selected or the mouse cursor is placed on it is squared animated. The number also turns white. This rectangle is also in line with the theme of the whole blue pagination.

#

Dynamic Pagination Code

#

Animated Pagination Code

#

HTML Pagination Code

#

CSS Numerical Pagination

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <nav class="pagination-outer" aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">5</a>
                    </li>
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
	margin-top: 100px !important;
}
a:hover, a:focus {
	text-decoration: none;
	outline: none
}
#demo {
	padding: 50px;
	background-color: #f9fafa;
}
.pagination-outer {
	text-align: center;
}
.pagination {
	display: inline-flex;
	position: relative;
	overflow: hidden;
	border-radius: 0;
}
.pagination li a.page-link, .pagination li:first-child a.page-link, .pagination li:last-child a.page-link {
	border: none;
	height: 45px;
	width: 45px;
	line-height: 30px;
	border-radius: 0;
	background-color: transparent;
	color: #0c5272;
	font-size: 20px;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	letter-spacing: 1px;
	text-transform: uppercase;
	z-index: 1;
	margin: 0 3px 10px;
	transition: all 0.4s ease 0s;
	-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
	clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.pagination li a.page-link:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 300px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: #0c5272;
	z-index: -1;
	transition: left 0.3s ease 0s, border-radius 0.3s ease 0.3s, height 0.3s ease 0.3s, width 0.3s ease 0.5s;
}
.pagination li a.page-link:hover:before, .pagination li.active a.page-link:before {
	left: 0;
	border-radius: 0;
	height: 105%;
	width: 100%;
}
.pagination li.active a.page-link, .pagination li a.page-link:hover, .pagination li.active a.page-link:hover {
	color: #fff;
	background-color: transparent;
}
@media only screen and (max-width: 480px) {
	.pagination {
		display: block;
	}
	.pagination li {
		display: inline-block;
		margin-bottom: 10px;
	}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
	margin-top: 100px !important;
}
a:hover, a:focus {
	text-decoration: none;
	outline: none
}
#demo {
	padding: 50px;
	background-color: #f9fafa;
}
.pagination-outer {
	text-align: center;
}
.pagination {
	display: inline-flex;
	position: relative;
	overflow: hidden;
	border-radius: 0;
}
.pagination li a.page-link, .pagination li:first-child a.page-link, .pagination li:last-child a.page-link {
	border: none;
	height: 45px;
	width: 45px;
	line-height: 30px;
	border-radius: 0;
	background-color: transparent;
	color: #0c5272;
	font-size: 20px;
	font-weight: 700;
	position: relative;
	overflow: hidden;
	letter-spacing: 1px;
	text-transform: uppercase;
	z-index: 1;
	margin: 0 3px 10px;
	transition: all 0.4s ease 0s;
	-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
	clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}
.pagination li a.page-link:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 300px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	transform: translateY(-50%);
	background: #0c5272;
	z-index: -1;
	transition: left 0.3s ease 0s, border-radius 0.3s ease 0.3s, height 0.3s ease 0.3s, width 0.3s ease 0.5s;
}
.pagination li a.page-link:hover:before, .pagination li.active a.page-link:before {
	left: 0;
	border-radius: 0;
	height: 105%;
	width: 100%;
}
.pagination li.active a.page-link, .pagination li a.page-link:hover, .pagination li.active a.page-link:hover {
	color: #fff;
	background-color: transparent;
}
@media only screen and (max-width: 480px) {
	.pagination {
		display: block;
	}
	.pagination li {
		display: inline-block;
		margin-bottom: 10px;
	}
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-8">
            <nav class="pagination-outer" aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">4</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">5</a>
                    </li>
                    <li class="page-item">
                        <a href="#" class="page-link" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview