Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change the size of the pagination with CSS
To change the pagination size in CSS, you can use the font-size property to make pagination elements larger or smaller. This affects both the text size and the overall visual impact of your pagination buttons.
Syntax
.pagination a {
font-size: value;
}
Example: Large Pagination Buttons
The following example creates pagination with increased size using font-size: 18px −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 8px 16px;
text-decoration: none;
transition: background-color 0.3s;
border: 1px solid orange;
font-size: 18px;
margin: 0 2px;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
.demo a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.demo a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class="demo">
<a href="/prev.html"><</a>
<a href="/quiz1.html">Quiz1</a>
<a href="/quiz2.html">Quiz2</a>
<a href="/quiz3.html" class="active">Quiz3</a>
<a href="/quiz4.html">Quiz4</a>
<a href="/next.html">></a>
</div>
</body>
</html>
A horizontal row of pagination buttons appears with "Quiz3" highlighted in orange. The buttons have increased size due to the 18px font-size, making them more prominent and easier to click.
Example: Small Pagination Buttons
You can also create smaller pagination by reducing the font-size −
<!DOCTYPE html>
<html>
<head>
<style>
.small-pagination {
display: inline-block;
}
.small-pagination a {
color: #333;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ddd;
font-size: 12px;
margin: 0 1px;
}
.small-pagination a.active {
background-color: #007bff;
color: white;
}
.small-pagination a:hover:not(.active) {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<h3>Compact Pagination</h3>
<div class="small-pagination">
<a href="/prev.html">?</a>
<a href="/page1.html">1</a>
<a href="/page2.html" class="active">2</a>
<a href="/page3.html">3</a>
<a href="/page4.html">4</a>
<a href="/next.html">?</a>
</div>
</body>
</html>
A compact pagination row with smaller buttons appears. Page "2" is highlighted in blue, and all buttons are noticeably smaller due to the 12px font-size.
Conclusion
The font-size property is the primary way to control pagination size in CSS. Larger values create more prominent buttons, while smaller values create compact pagination suitable for space-constrained layouts.
Updated on: 2026-03-15T13:00:57+05:30
437 Views
Advertisements