Pagination is the process of dividing the document into pages and providing them with numbers.
Types of Pagination: There are many types of pagination in CSS. Some of them are given below:
- Simple Pagination
- Active and Hoverable Pagination
- Rounded Active and Hoverable Buttons
- Hoverable Transition Effect
- Bordered Pagination
- Rounded Border Pagination
- Centered Pagination
- Space between Pagination
- Pagination Size
Simple Pagination: This is the basic form of pagination.
Syntax:
.pagination {
display:type
}
.pagination body {
color:colorname
decoration:type
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 140px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Simple Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output:
Active and Hoverable Pagination: In this pagination, by using the active class the current page will be highlighted. Hover will change the color of the page link when the mouse moves over them.
Syntax:
.pagination body.active {
display:type
background-color:colorname
}
.pagination body:hover:not(.active) {
background-color:colorname
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 90px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Active and Hoverable Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output: 
Rounded Active and Hoverable Buttons: For rounded active and hoverable buttons just add border-radius property.
Syntax:
.pagination body.active {
display:type
background-color:colorname
border-radius:size
}
.pagination body:hover:not(.active) {
background-color:colorname
border-radius:size
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
border-radius: 5px;
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
border-radius: 5px;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 40px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Rounded Active and Hoverable Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output: 
Hoverable Transition Effect: Transition property is added to create a transition effect on hover.
Syntax:
.pagination body:hover {
transition:type
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 40px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Hoverable Transition Effect Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output: 
Bordered Pagination: In this type of pagination a border is added to the pagination. Use border property to add borders to the pagination.
Syntax:
.pagination body {
border:type
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 140px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Bordered Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output: 
Rounded Border Pagination: The border can be rounded using border-radius property.
Syntax:
.pagination body {
border:type
border-radius:size
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-left: 100px;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-left: 110px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Rounded Border Pagination</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</body>
</html>
Output:
Centered Pagination: Pagination can be centered by using text-align property.
Syntax:
.center {
text-align:center
}
.pagination body {
color:colorname
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Centered Pagination</div>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
Output: 
Space Between Pagination: Page links can be spaced if you do not want to group them. Use the margin property to provide space between the links.
Syntax:
.pagination body {
color:colorname
margin:type
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 20px;
color: black;
float: left;
margin: 0px 5px;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Space Between Pagination</div>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
Output: 
Pagination Size: The size of the pagination can be changed using the font-size property.
Syntax:
.pagination body {
color:colorname
font-size:size
}Example: This example shows the use of CSS Pagination.
html
<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}
.center {
text-align: center;
}
.pagination a {
font-weight: bold;
font-size: 25px;
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border: 1px solid black;
}
.pagination a.active {
background-color: #009900;
}
.pagination a:hover:not(.active) {
background-color: #d4d5d2;
}
.GFG {
font-size: 42px;
font-weight: bold;
color: #009900;
text-align: center;
margin-bottom: 60px;
}
.peg {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="GFG">GeeksforGeeks</div>
<div class="peg">Pagination Size</div>
<div class="center">
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a class="active" href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
<a href="#">»</a>
</div>
</div>
</body>
</html>
Output:
Similar Reads
Using the Tabindex Attribute in Navigation Bars with HTML & CSS
The tabindex attribute is used to specify the order in which elements receive focus when the "tab" key is pressed. This allows for improved accessibility and control over the focus order for interactive elements on a webpage.What is tabindex?The tabindex attribute controls whether an element can be
2 min read
Advanced Selectors in CSS
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below: Adjacent Sibling Selector: It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
5 min read
Advance CSS Layout with Flexbox
Flexbox is a powerful CSS layout model that simplifies the creation of flexible and responsive layouts. It allows you to align and distribute space among items within a container, making complex designs easier to manage.Flexbox is particularly useful for building responsive designs that adapt seamle
4 min read
CSS 2D Transforms
A transformation in CSS is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis. There are 6 main types of transformation which are listed below:translate()rotate()scale()skewX()skewY()matrix()We will implement all these functions & wi
5 min read
CSS 3D Transforms
CSS 3D transforms are used to manipulate HTML elements in three dimensions by rotating them along the x-axis, y-axis, and z-axis. There are three main types of transformation which are listed below:rotateX(): Rotates an element around its X-axis.rotateY(): Causes rotation around the Y-axis.rotateZ()
3 min read
CSS Media Queries
CSS Media Queries are used to apply CSS styles according to the screen size.Media queries detect device features like screen width, height, and resolution.Breakpoints define the screen sizes where the design needs to change.They ensure a smooth, user-friendly experience across all devices.Syntax:@me
4 min read
CSS Pagination
Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition Effect
7 min read
CSS Gradients
CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of
7 min read
CSS Shadow Effect
The shadow effect property in CSS is used to add shadows to text and images in HTML documents. This enhances the visual appeal and depth of your web elements, making your design more engaging. Text ShadowThe text-shadow property in CSS is used to display text with a shadow. This property defines the
2 min read
CSS Animations
CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.Use @keyframes to define the animation steps.Apply animations with properties like animation-name and animation-duration.Control the animation flow using animation-timin
7 min read