Stunning CSS3 Pagination

Developer
Faizan Asad
Size
2,484 Kb
Views
54,648
  1. Stunning CSS3 Pagination Previews
  2. Stunning CSS3 Pagination HTML Codes
  3. Stunning CSS3 Pagination CSS Codes

How do I make an stunning css3 pagination?

By Faizan Asad. What is a stunning css3 pagination? How do you make a stunning css3 pagination? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.

Stunning CSS3 Pagination Previews
IQ Test

Stunning CSS3 Pagination - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stunning CSS3 Pagination</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pagination_s">	<span>	<a href="#" class=""> <p class="switch">►</p></a>	</span>	<span>	<a href="#" class=""><p>►</p></a>	</span>
</div>
<div class="pagination">	<a href="#">►</a>	<a href="#">1</a>	<a href="#">2</a>	<a href="#">...</a>	<a href="#">10</a>	<a href="#">11</a>	<a href="#">►</a>
</div>
</body>
</html>

Stunning CSS3 Pagination - Script Codes CSS Codes

body { font-family: "Helvetica","Lucida Grande",sans-serif; font-weight: 300; font-size: 76%; background: #EFEFEF;
}
p { margin: 0; padding: 0;
}
.pagination_s,.pagination { margin: auto; border: 1px solid #ccc; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 79px; height: auto; font-weight: bold; background: rgb(255,255,255); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0.01),color-stop(rgba(247,247,247,1),1)); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /*box-shadow*/ -webkit-box-shadow: 0px 1px 1px #ccc; -moz-box-shadow: 0px 1px 1px #ccc; box-shadow: 0px 1px 1px #ccc;
}
.pagination { margin-top: 20px; width: 282px;
}
.pagination a,
.pagination strong,
.pagination_s a,
.pagination_s strong { /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0.01),color-stop(rgba(247,247,247,1),1)); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); display: inline-block; margin-right: -3px; margin-top: 0; padding: 10px 15px; text-decoration: none; border-right: 1px solid #ccc; color: #959190;
}
.switch { /*transform*/ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.pagination a:first-child { background: rgb(247,247,247); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(247,247,247,1),0),color-stop(rgba(255,255,255,1),0.99)); background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(99%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(255,255,255,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); /*transform*/ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); border: 0; font-size: 80%; font-weight: 300; padding: 11px 15px;
}
.pagination a:last-child,
.pagination_s a:last-child { -webkit-border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; margin-left: -6px; font-size: 80%; font-weight: 300; padding: 11px 15px;
}
.pagination_s a:last-child { padding: 11px 14px;
}
.pagination a:hover,
.pagination_s a:hover { /*box-shadow*/ color: #000; background: rgb(229,229,229); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(229,229,229,1),0),color-stop(rgba(255,255,255,1),0.99)); background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(99%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
.pagination a:first-child:hover { background: rgb(255,255,255); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0.01),color-stop(rgba(229,229,229,1),1)); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(229,229,229,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(229,229,229,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(229,229,229,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%, rgba(229,229,229,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(229,229,229,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(229,229,229,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(229,229,229,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(229,229,229,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}
.pagination_s a:first-child { height: 10px; border-left: 0px solid #B3B3B3; border-right: 0px solid #ccc; background: rgb(255,255,255); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(255,255,255,1),0.01),color-stop(rgba(247,247,247,1),1)); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%, rgba(247,247,247,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 1%,rgba(247,247,247,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); -webkit-border-top-right-radius: 3px; -moz-border-top-right-radius: 3px; border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; margin-left: 0px; border: 0;
}
.pagination_s a:hover { background: rgb(229,229,229); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(229,229,229,1),0),color-stop(rgba(255,255,255,1),0.99)); background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 99%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(99%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); background: linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
}
.pagination a:first-child { border-left: #ccc solid 1px; height: auto;
}
.pagination a:last-child { border-left: #ccc solid 1px }
.pagination_s span:first-child { border-right: 1px solid #ccc; border-bottom-left-radius: 0px;
}
Stunning CSS3 Pagination - Script Codes
Stunning CSS3 Pagination - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3
Size 2,484 Kb
Views 54,648
Do you need developer help for Stunning CSS3 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!

Faizan Asad (faizanasad) Script Codes
Name
Bing Clone Only HTML
CSS Awesome Task List Check Box
A Pen by Faizan Asad
Envato
Slingshot Game
Stunning Animated CSS3 Download Button
CSS3 Digital Lock
Menubar
Amazing Tag Cloud
Google Style Footer
Create amazing art & images 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!