Header Ads Widget

Pagination with HTML & CSS

My codding spot October 30, 2021

You can see pagination in hard or soft copy of books, documents etc.. Pagination also called paging.

This post is about creating and designing pagination using HTML and CSS.


What is pagination?

Pagination is the process of assigning page numbers to document or books at header or footer.

Pagination in web development

In web development, pagination divides content of website into discrete pages. Users can access specific section or content by clicking page numbers display at bottom.

Structure of pagination with HTML

Let’s, first create structure of pagination. To create pagination I used group of <span> elements. In between <span> elements anchor tag is defined to apply link on page numbers. At first and last arrow specifies previous and next pages respectively.

Below is the HTML code and output of pagination.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
</head>
<body>
<article>
<h2>What is pagination?</h2>
<p>pagination is process of asssign page number to each page of book or document.</p>
</article>
<div class="paging">
<span><a href="#" ><<</a></span>
<span><a href="#" >1</a></span>
<span><a href="#" >2</a></span>
<span><a href="#" >3</a></span>
<span><a href="#" >4</a></span>
<span><a href="#" >5</a></span>
<span><a href="#" >>></a></span>
</div>
</body>
</html>

Output:-

HTML structure of pagination
HTML structure of pagination 


Different styles of pagination using CSS

Simple pagination

This is simple design with CSS. Here I simply remove underline from the links and add border and padding to <article> element.


1
2
3
4
5
6
7
8
9
article{
height:100px;
width:300px;
border:3px groove #666666;
padding:10px;
}
a{
text-decoration:none;
}

Output:-

Simple pagination
Simple pagination 


Bordered pagination

Using border property you can also add borders to pagination. With borders square box is added to each page numbers.


1
2
3
4
span{
padding:10px;
border:2px solid #ccc;
}

Output:-
Bordered pagination
Bordered pagination 


Rounded border pagination

To make border corners in round shape use border-radius property. You can set border-radius property either for all span elements or only some selected elements. Here I sets border-radius property to first and last  span elements.


1
2
3
4
.paging span:first-child {
border-radius:5px 0px 0px 5px;}
.paging span:last-child {
border-radius:0px 5px 5px 0px;}

Output:-

Rounded border pagination
Rounded border pagination 


Pagination links with padding 

Now to make pagination looks pretty add padding to each page numbers. Which adds space between the page numbers and it’s borders and also add top margin to add space between content and pagination.


1
2
3
4
5
6
.paging{
margin-top:50px;
}
span{
padding:10px;
}

Output:-

pagination links with padding
Pagination links with padding 


Pagination size

Use font-size property to change size of fonts of pagination.

1
2
3
a{
font-size:22px;
}

Output:-
Pagination size
Pagination size 



Pagination position

Use margin properties to set position of pagination. Here I used margin-top and margin-left properties to set position at center.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
article{
height:100px;
width:300px;
margin-top:200px;
margin-left:500px;
border:3px groove #666666;
padding:10px;
}
.paging{
margin-left:515px;
margin-top:50px;
}

Output:-

Pagination position (center)
Pagination position (center)




Active and hoverable pagination

You can also add hover effect and active page with :hover pseudo-class. This looks like navigation menu.


1
2
3
4
5
6
span:hover:not(.active){
background-color:#009900;
}
.active{
background-color:#FF0000;
}

Output:-

Active and hoverable pagination
Active and hoverable pagination 


 Pagination with Transition effect

When you hover on page numbers it’s background color instantly appears, using transition property you can set timing of background color appearance.

1
2
3
span{
transition:background-color 2s;
}

Output:-



Here is the complete code

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Pagination</title>
<link rel="stylesheet" href="pagination.css">
</head>
<body>
<article>
<h2>What is pagination?</h2>
<p>pagination is process of asssign page number to each page of book or document.</p>
</article>
<div class="paging">
<span><a href="#" ><<</a></span>
<span class="active"><a href="#" >1</a></span>
<span><a href="#" >2</a></span>
<span><a href="#" >3</a></span>
<span><a href="#" >4</a></span>
<span><a href="#" >5</a></span>
<span><a href="#" >>></a></span>
</div>
</body>
</html>


CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
article{
height:100px;
width:300px;
margin-top:200px;
margin-left:500px;
border:3px groove #666666;
padding:10px;
}
.paging{
margin-left:515px;
margin-top:50px;
}
a{
text-decoration:none;
font-size:22px;
}
span{
padding:10px;
border:2px solid #ccc;
transition:background-color 2s;
}

.paging span:first-child {
border-radius:5px 0px 0px 5px;}
.paging span:last-child {
border-radius:0px 5px 5px 0px;}
span:hover:not(.active){
background-color:#009900;
}
.active{
background-color:#FF0000;
}

Pagination with Previous/Next buttons 

Previous/Next buttons takes you forward and backward from the current page.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<title>pagination buttons</title>
<style>
.btn{
height:auto;
width:auto;
background-color:#03c;
text-align:center;
padding:5px;
}
a{
text-decoration:none;
font-size:20px;
}
span{
background-color:#ccc;
border:3px solid #333;
padding:1px;}
span:hover{
background-color:#000;
}
</style>
</head>
<body>
<div class="btn">
<span><a href="#" >Previous</a></span>
<span><a href="#" >Next</a></span>
</div>
</body>
</html>

Output:-
Next/previous buttons in pagination
Next/previous buttons pagination


Breadcrumbs pagination

Breadcrumbs pagination is another variant of pagination. Breadcrumbs specifies current page location of user. Thus user exactly know that where he/she is.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<title>breadcrumbs</title>
<style>
.breadcrumb{
margin-top:100px;
background-color:#ccc;
width:auto;
height:auto;
border-radius:10px;
text-align:center;}
a{
text-decoration:none;
font-size:20px;}
span{
padding:3px;
}
.breadcrumb span+span:before{
content:"/\00a0";
color:#333;
padding:3px;
}
.active{
background-color:#ff0000;}
span a:hover:not(.active){
background-color:#00FF00;}
</style>
</head>
<body>
<div class="breadcrumb">
<span><a href="#" class="active">Home</a></span>
<span><a href="#" >Gallary</a></span>
<span><a href="#" >Images</a></span>
<span>flower</span>
</div>
</body>
</html>

Output:-
Breadcrumbs pagination
Breadcrumbs pagination 


Benefits of pagination

  • Makes easier way for user to jump on the page they want to view.
  • Faster load time.
  • User knows where they are. 
  • Users can look how many pages are left.

Conclusion

Using CSS you can creates different types of pagination. Breadcrumbs pagination is more accurate than normal pagination. Pagination mainly used for electronic document to split content on different pages , For search results pages,etc..
 For example, Google search.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments