css pagination properties tutorial

2026June23

Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
Online web design, along with everything you need for a complete website.
CSS Simple Pagination Properties Tutorial.Learn how to create a responsive pagination using CSS.

css basic pagination

« 1 2 3 4 5 6 »

basic pagination code


<style>
.pagination1 {
  display: inline-block;
}

.pagination1 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>


<div class="pagination1">
  <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="#">»</a>
</div>

css 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:

« 1 2 3 4 5 6 »

active and hoverable pagination code


<style>
.pagination2 {
  display: inline-block;
}

.pagination2 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination2 a.active {
  background-color: red;
  color: #000;
}

.pagination2 a:hover:not(.active) {background-color: #ccc; color: #000;}
</style>


<div class="pagination2">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css rounded active and hoverable pagination

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

« 1 2 3 4 5 6 »

rounded active and hoverable pagination code


<style>
.pagination3 {
  display: inline-block;
}

.pagination3 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
border-radius: 5px;
}

.pagination3 a.active {
  background-color: #007FFF;
  color: #000;
border-radius: 5px;
}

.pagination3 a:hover:not(.active) {background-color: cyan; color: #000;}
</style>


<div class="pagination3">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css bordered pagination

Use the border property to add borders to the pagination:

« 1 2 3 4 5 6 »

bordered pagination code


<style>
.pagination4 {
  display: inline-block;
}

.pagination4 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ccc;
}

.pagination4 a.active {
  background-color: red;
  color: white;
  border: 1px solid #ccc;
}

.pagination4 a:hover:not(.active) {background-color: orange;}
</style>


<div class="pagination4">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css rounded bordered pagination

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

« 1 2 3 4 5 6 »

rounded bordered pagination code


<style>
.pagination5 {
  display: inline-block;
}

.pagination5 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ccc;
}

.pagination5 a.active {
  background-color: red;
  color: white;
  border: 1px solid #ccc;
}

.pagination5 a:hover:not(.active) {background-color: orange;}

.pagination5 a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination5 a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>


<div class="pagination5">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css space between links pagination

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

« 1 2 3 4 5 6 »

space between links pagination code


<style>
.pagination6 {
  display: inline-block;
}

.pagination6 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ccc;
  margin: 0 4px;
}

.pagination6 a.active {
  background-color: red;
  color: white;
  border: 1px solid #555;
}

.pagination6 a:hover:not(.active) {background-color: #66FF00;  color: #000;}
</style>


<div class="pagination6">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css size pagination

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

« 1 2 3 4 5 6 »

size pagination code


<style>
.pagination7 {
  display: inline-block;
}

.pagination7 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ccc;
  font-size: 22px;
}

.pagination7 a.active {
  background-color: #77B5FE;
  color: white;
  border: 1px solid #ccc;
}

.pagination7 a:hover:not(.active) {background-color: #cd7f32;}
</style>


<div class="pagination7">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

css centered pagination

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

« 1 2 3 4 5 6 »

centered pagination code


<style>


.pagination8 {
  display: inline-block;
}

.pagination8 a {
  color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ccc;
  margin: 0 4px;
}

.pagination8 a.active {
  background-color: #11ABB0;
  color: white;
  border: 1px solid #ccc;
}

.pagination8 a:hover:not(.active) {background-color: #191c24;}
</style>


<center>
  <div class="pagination8">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
  
</div>
</center>

css next/previous and navigation pagination

Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:

Next/Previous buttons:

❮ ❯

Navigation pagination:

Home Link 1 Link 2 Link 3

next/previous and navigation pagination code


<style>
.pagination9 {
  display: inline-block;
}

.pagination9 a {
  color: color: #fff;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ccc;
}

.pagination9 a.active {
  background-color: #313131;
  color: white;
  border: 1px solid #ccc;
}

.pagination9 a:hover:not(.active) {background-color: #960018;  color: #000;}
</style>


<p>Next/Previous buttons:</p>
<div class="pagination9">
  <a href="#">❮</a>
  <a href="#">❯</a>
</div>

<p>Navigation pagination:</p>
<div class="pagination9">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

code

All Basic HTML5

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

All Basic CSS3

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

js JAVASCRIPT

Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

CREATIONS

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.

NAVIGATION Bar

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

WEB BUTTONS

Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.

css pagination properties tutorial

css active and hoverable pagination

css rounded active and hoverable pagination

css bordered pagination

All Basic HTML5

All Basic CSS3

js JAVASCRIPT

CREATIONS

NAVIGATION Bar

WEB BUTTONS

Netbax Contact Us