Css for pagination styles

How to Create Pagination with CSS

Pagination is an ordinal numbering of pages, usually located at the top or bottom of the site pages. Pagination helps search engine bots to index the articles and rank them.

In this snippet, we will show how to create Pagination with HTML and CSS. Also, we will offer you creative examples. Let’s see how to create standard pagination and then apply various styles.

Create HTML

div a href="#">«a> a href="#">1a> a href="#">2a> a href="#">3a> a href="#">4a> a href="#">5a> a href="#">6a> a href="#">7a> a href="#">8a> a href="#">»a> div>

Add CSS

• Give color to the numbers and use the float property to define on which side of the container the elements should be placed.
• Create padding space. Here, the first value sets the top and bottom sides, and the second one sets the right and left sides. Also, set the text-decoration property to «none».
• Style the «active» class by giving it a background-color and specifying the color of the number.
• Specify a background-color for all the tags except for the «active» class by using the :hover and :not() pseudo-classes.

.pag a < color: #000000; float: left; padding: 12px 18px; text-decoration: none; > .pag a.active < background-color: #8ebf42; color: #ffffff; > .pag a:hover:not(.active) < background-color: #cccccc; >

Here’s the full example of a standard pagination with CSS.

Example of creating standard pagination:

html> html> head> title>Title of the document title> style> .pag < clear: both; content: ""; display: table; margin: 0 10px 10px; > .pag a < color: #000000; float: left; padding: 12px 18px; text-decoration: none; > .pag a.active < background-color: #8ebf42; color: #ffffff; > .pag a:hover:not(.active) < background-color: #ccc; > style> head> body> h2>Pagination h2> div class="pag"> 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="#">7 a> a href="#">8 a> a href="#">» a> div> body> html>

Result

Example of creating rounded and hoverable pagination:

html> html> head> title>Title of the document title> style> .pag < display: inline-block; > .pag a < color: black; float: left; padding: 12px 18px; text-decoration: none; > .pag a.active < background-color: #060185; color: white; border-radius: 50%; > .pag a:hover:not(.active) < background-color: #cbcadb; border-radius: 50%; > style> head> body> h2>Pagination h2> div class="pag"> a href="#">« a> a href="#">1 a> a href="#">2 a> a href="#">3 a> a href="#">4 a> a href="#">5 a> a class="active" href="#">6 a> a href="#">7 a> a href="#">8 a> a href="#">» a> div> body> html>

Example of creating hoverable and active pagination:

html> html> head> title>Title of the document title> style> html < font-family: "Arial", sans-serif; font-size: 12px; > body < display: flex; align-items: center; > .pager__item < display: inline-block; vertical-align: top; font-size: 15px; font-weight: bold; margin: 0 2px; > .pager__item.active .pager__link < background-color: #7a0052; color: #fff; text-decoration: none; > .pager__link < position: relative; border-radius: 5px; display: block; text-align: center; width: 30px; height: 30px; line-height: 30px; color: #2f3640; text-decoration: none; transition: 0.2s; > .pager__link:hover, .pager__link:focus, .pager__link:active < background-color: #efdcf7; color: #fff; text-decoration: none; > @media screen and (max-width: 576px) < .pager__item < position: absolute; top: -9999px; left: -9999px; > > style> head> body> div class="wrapper"> nav> ul class="pager"> li class="pager__item">a class="pager__link" href="#">« a> li> li class="pager__item">a class="pager__link" href="#">. a> li> li class="pager__item">a class="pager__link" href="#">1 a> li> li class="pager__item active">a class="pager__link" href="#">2 a> li> li class="pager__item">a class="pager__link" href="#">3 a> li> li class="pager__item">a class="pager__link" href="#">4 a> li> li class="pager__item">a class="pager__link" href="#">5 a> li> li class="pager__item">a class="pager__link" href="#">6 a> li> li class="pager__item">a class="pager__link" href="#">. a> li> li class="pager__item">a class="pager__link" href="#">» a> li> ul> nav> div> body> html>

Another example of beautiful pagination created with tag.

html> html> head> title>Title of the document title> style> .flex < width: 400px; height: 80px; line-height: 80px; background-color: #eeeeee; position: absolute; top: 15%; left: 40%; margin: -25px 0 0 -150px; > .flex ul < display: flex; padding: 0; margin: 0; box-shadow: 0 10px 20px 0 #cccccc; > .flex ul li < flex: 1; list-style: none; text-align: center; position: relative; font-size: 20px; font-weight: bold; transition: 0.3s ease; cursor: pointer; user-select: none; > .flex ul li:hover < background-color: rgba(255, 255, 255, 0.25); color: #65bcc9; > .flex ul li:hover:nth-of-type(2) ~ .bar < left: 20%; > .flex ul li:hover:nth-of-type(3) ~ .bar < left: 40%; > .flex ul li:hover:nth-of-type(4) ~ .bar < left: 60%; > .flex ul li:hover:nth-of-type(5) ~ .bar < left: 80%; > .flex ul .bar < width: 20%; background-color: #2696a6; height: 5px; position: absolute; left: 0; bottom: 0; transition: 0.3s ease; > style> head> body> div class="flex"> ul> li>1 li> li>2 li> li>3 li> li>4 li> li>5 li> div class="bar"> div> ul> div> body> html>

Another nice tooltip pagination example. Tooltip pagination is a plain design with dots.

Example of creating tooltip pagination:

html> html> head> title>Title of the document title> style> body < background: #070e6b; > .pagination < position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 15px; margin: auto; text-align: center; > .pagination__dot < position: relative; width: 12px; height: 12px; border: 2px solid #8a0e9e; border-radius: 50%; display: inline-block; cursor: pointer; margin: 0 5px; transition: .3s; > .pagination__dot--active < background: #8a0e9e; > .pagination__dot:hover < transition: .3s; border-color: #eeeeee; background: #eeeeee; > .pagination__dot:hover:before < top: -48px; opacity: 1; > .pagination__dot:hover:after < top: -18px; opacity: 1; > .pagination__dot:before < position: absolute; top: -40px; left: -36px; background: #eeeeee; width: 80px; font-family: "Montserrat"; font-size: 16px; padding: 8px 0; border-radius: 5px; content: attr(data-tooltip); opacity: 0; transition: .2s; > .pagination__dot:after < position: absolute; width: 0; height: 0; top: -10px; left: -2px; border-top: 8px solid white; border-right: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid transparent; content: ""; opacity: 0; transition: .2s; > style> head> body> div class="pagination"> div data-tooltip="Tooltip 1" class="pagination__dot pagination__dot--active"> div> div data-tooltip="Tooltip 2" class="pagination__dot"> div> div data-tooltip="Tooltip 3" class="pagination__dot"> div> div data-tooltip="Tooltip 4" class="pagination__dot"> div> div data-tooltip="Tooltip 5" class="pagination__dot"> div> div> body> html>

Источник

32 CSS Pagination

Collection of free HTML and CSS pagination code examples: responsive, simple, material design, navigation dots, etc. Update of April 2019 collection. 5 new items.

Related Articles

1. Bootstrap Pagination
2. jQuery Pagination
3. React Pagination
4. Tailwind Pagination

Author

Links

Made with

About a code

Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pagination Design

Awesome pagination design in HTML and CSS only.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS3 — Neumorphism Pagination Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pagination Concept

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pagination / Pager

Responsive pagination/pager in HTML and CSS. Resize your browser to show interesting effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Line Follow Pagination

CSS line follow pagination.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pagination Buttons

Pure CSS pagination buttons.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

Line Pagination with Hover

Pure CSS line pagination with hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pacman Pagination

Pagination animation with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Roman Pagination

Simple CSS Roman pagination.

Author

Links

Made with

About the code

Pac-Man CSS Pagination

Pure CSS Pac-Man pagination with animation on hover.

Author

Links

Made with

About the code

Responsive Pagination

Simple responsive pagination.

Author

Links

Made with

About the code

Roundie Pagination

Author

Links

Made with

About the code

Pagination

Pagination example that allows you to navigate between different pages. This example would have to have href attributes in order to work with an actual application that requires pagination.

6 Pure CSS Pagination

Pagination options and designs.
Made by MojoM
May 25, 2017

SVG Page Hopper

HTML, CSS and SVG page hopper.
Made by Chris Gannon
May 14, 2017

Infinite Pagination

Infinite pagination in HTML and CSS.
Made by Mariusz Dabrowski
April 27, 2017

Author

Источник

CSS Pagination Examples

Learn how to create a responsive pagination using CSS.

Simple Pagination

If you have a website with lots of pages, you may wish to add some sort of pagination to each page:

Example

.pagination <
display: inline-block;
>

.pagination a color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
>

Active and Hoverable Pagination

Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

Example

.pagination a.active <
background-color: #4CAF50;
color: white;
>

Rounded Active and Hoverable Buttons

Add the border-radius property if you want a rounded «active» and «hover» button:

Example

.pagination a <
border-radius: 5px;
>

.pagination a.active border-radius: 5px;
>

Hoverable Transition Effect

Add the transition property to the page links to create a transition effect on hover:

Example

Bordered Pagination

Use the border property to add borders to the pagination:

Example

Rounded Borders

Tip: Add rounded borders to your first and last link in the pagination:

Example

.pagination a:first-child <
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
>

.pagination a:last-child border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
>

Space Between Links

Tip: Add the margin property if you do not want to group the page links:

Example

Pagination Size

Change the size of the pagination with the font-size property:

Example

Centered Pagination

To center the pagination, wrap a container element (like ) around it with text-align:center

Example

More Examples

Example

Breadcrumbs

Another variation of pagination is so-called «breadcrumbs»:

Example

ul.breadcrumb <
padding: 8px 16px;
list-style: none;
background-color: #eee;
>

ul.breadcrumb li+li:before padding: 8px;
color: black;
content: «/\00a0»;
>

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник