Pagination

Developer
Vineeth.TR
Size
4,753 Kb
Views
44,528
  1. Pagination Previews
  2. Pagination HTML Codes
  3. Pagination CSS Codes
  4. Pagination JS Codes

How do I make an pagination?

What is a pagination? How do you make a pagination? This script and codes were developed by Vineeth.TR on 04 July 2022, Monday.

Pagination Previews
IQ Test

Pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pagination</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="pagination modal-1"> <li><a href="#" class="prev">&laquo</a></li> <li><a href="#" class="active">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="#">8</a></li> <li> <a href="#">9</a></li> <li><a href="#" class="next">&raquo;</a></li>
</ul><br>
<ul class="pagination modal-2"> <li><a href="#" class="prev">&laquo </a></li> <li><a href="#">1</a></li> <li> <a href="#">2</a></li> <li> <a href="#" class="active">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="#">8</a></li> <li> <a href="#">9</a></li> <li><a href="#" class="next"> &raquo;</a></li>
</ul><br>
<ul class="pagination modal-3"> <li><a href="#" class="prev">&laquo</a></li> <li><a href="#" class="active">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="#">8</a></li> <li> <a href="#">9</a></li> <li><a href="#" class="next">&raquo;</a></li>
</ul><br>
<ul class="pagination modal-4"> <li><a href="#" class="prev"> <i class="fa fa-chevron-left"></i> Previous </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="#" class="active">5</a></li> <li> <a href="#">6</a></li> <li> <a href="#">7</a></li> <li><a href="#" class="next"> Next <i class="fa fa-chevron-right"></i> </a></li>
</ul><br>
<ul class="pagination modal-5"> <li><a href="#" class="prev fa fa-arrow-left"> </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="#" class="active">5</a></li> <li> <a href="#">6</a></li> <li> <a href="#">7</a></li> <li> <a href="#">8</a></li> <li> <a href="#">9</a></li> <li><a href="#" class="next fa fa-arrow-right"></a></li>
</ul>
<br>
<ul class="pagination modal-6"> <li><a href="#" class="prev">&laquo</a></li> <li> <a href="#">1</a></li> <li> <a href="#">2</a></li> <li><a href="#" class="active">3</a></li> <li> <a href="#">5</a></li> <li> <a href="#">6</a></li> <li><a href="#" class="next">&raquo;</a></li>
</ul> <script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pagination - Script Codes CSS Codes

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; font-family: arial;
}
body { background-color: #555; text-align: center; font-family: arial;
}
.pagination { list-style: none; display: inline-block; padding: 0; margin-top: 10px;
}
.pagination li { display: inline; text-align: center;
}
.pagination a { float: left; display: block; font-size: 14px; text-decoration: none; padding: 5px 12px; color: #fff; margin-left: -1px; border: 1px solid transparent; line-height: 1.5;
}
.pagination a.active { cursor: default;
}
.pagination a:active { outline: none;
}
.modal-1 li:first-child a { -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px; border-radius: 6px 0 0 6px;
}
.modal-1 li:last-child a { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0; border-radius: 0 6px 6px 0;
}
.modal-1 a { border-color: #ddd; color: #4285F4; background: #fff;
}
.modal-1 a:hover { background: #eee;
}
.modal-1 a.active, .modal-1 a:active { border-color: #4285F4; background: #4285F4; color: #fff;
}
.modal-2 li:first-child a { -moz-border-radius: 50px 0 0 50px; -webkit-border-radius: 50px; border-radius: 50px 0 0 50px;
}
.modal-2 li:last-child a { -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0;
}
.modal-2 a { border-color: #ddd; color: #999; background: #fff;
}
.modal-2 a:hover { color: #E34E48; background-color: #eee;
}
.modal-2 a.active, .modal-2 a:active { border-color: #E34E48; background: #E34E48; color: #fff;
}
.modal-3 a { margin-left: 3px; padding: 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;
}
.modal-3 a:hover { background-color: #4DAD16;
}
.modal-3 a.active, .modal-3 a:active { background-color: #37B247;
}
.modal-4 a { margin: 0 5px; padding: 0; width: 30px; height: 30px; line-height: 30px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; background-color: #F7C12C;
}
.modal-4 a.prev { -moz-border-radius: 50px 0 0 50px; -webkit-border-radius: 50px; border-radius: 50px 0 0 50px; width: 100px;
}
.modal-4 a.next { -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0; width: 100px;
}
.modal-4 a:hover { background-color: #FFA500;
}
.modal-4 a.active, .modal-4 a:active { background-color: #FFA100;
}
.modal-5 { position: relative;
}
.modal-5:after { content: ''; position: absolute; width: 100%; height: 35px; left: 0; bottom: 0; z-index: -1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPjxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0.65)), color-stop(50%, rgba(0, 0, 0, 0.65)), color-stop(60%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 40%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0) 100%);
}
.modal-5 a { color: #666; padding: 13px 5px 5px; margin: 0 10px; position: relative;
}
.modal-5 a:hover { color: #fff;
}
.modal-5 a:hover:after { content: ''; position: absolute; width: 24px; height: 24px; background: #1E7EE2; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; z-index: -1; left: -3px; bottom: 4px; margin: auto;
}
.modal-5 a.next, .modal-5 a.prev { color: #1E7EE2;
}
.modal-5 a.next:hover, .modal-5 a.prev:hover { color: #fff;
}
.modal-5 a.next:hover:after, .modal-5 a.prev:hover:after { display: none;
}
.modal-5 a.active { background: #1E7EE2; color: #fff;
}
.modal-5 a.active:before { content: ''; position: absolute; top: -11px; left: -10px; width: 18px; border: 10px solid transparent; border-bottom: 7px solid #104477; z-index: -1;
}
.modal-5 a.active:hover:after { display: none;
}
.modal-6 { -moz-box-shadow: 0 2px 2px #333; -webkit-box-shadow: 0 2px 2px #333; box-shadow: 0 2px 2px #333; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
.modal-6 a { border-color: #ddd; color: #999; background: #fff; padding: 10px 15px;
}
.modal-6 a:hover { color: #E34E48; background-color: #eee;
}
.modal-6 a.prev { -moz-border-radius: 50px 0 0 50px; -webkit-border-radius: 50px; border-radius: 50px 0 0 50px; width: 50px; position: relative;
}
.modal-6 a.prev:after { content: ''; position: absolute; width: 10px; height: 100%; top: 0; right: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.2))); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
}
.modal-6 a.next { -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0; width: 50px; position: relative;
}
.modal-6 a.next:after { content: ''; position: absolute; width: 10px; height: 100%; top: 0; left: 0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
.modal-6 a.active { border-color: #bbb; background: #fff; color: #E34E48; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.25) inset;
}

Pagination - Script Codes JS Codes

alsolike( "xbyvmZ", "Radio Button List", "XJyqQr", "Loading", "GJpxoQ", "Simple Spinners"
);
Pagination - Script Codes
Pagination - Script Codes
Home Page Home
Developer Vineeth.TR
Username vineethtr
Uploaded July 04, 2022
Rating 4.5
Size 4,753 Kb
Views 44,528
Do you need developer help for Pagination?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vineeth.TR (vineethtr) Script Codes
Name
Material Action buttons
Download Button
Social Nav
Loading
Html Icons
Inbox Compose
Login form shake effect
Semi Circle Donut Charts
Material Login
Material Login
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!