Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Let says we have the following format of pagination links.
<nav> <ul class='paging'> <li><a href=''>1</a></li> <li><a href=''>2</a></li> <li><a href=''>3</a></li> <li><a href=''>4</a></li> <li><a href=''>5</a></li> <li><a href=''>6</a></li> <li><a href=''>7</a></li> </ul> </nav>
To create a simple pagination links, we can just use the following css style sheet.
nav ul.paging, nav ul.paging li {
margin:0;
padding:0;
list-style:none;
}
nav ul.paging{
margin:10px 0;
}
nav ul.paging li a {
background-color: #fff;
border: 1px solid #ddd;
position: relative;
float: left;
padding: 5px 10px;
color: #0275d8;
text-decoration: none;
cursor:pointer;
margin-right:3px;
}
nav ul.paging li a:focus, nav ul.paging li a:hover, nav ul.paging li a.active {
background-color: #eceeef;
color: #014c8c;
border-color: #ddd;
}
Demo of Pagination Links using CSS.
By default when using UL LI tags, it comes with margin and padding and with list style on it. You will need to reset or clear the default values. Then the next important part is to layout the LI tags into a display inline format. This can be easily done by set this LI tag to use float property and set it to the left.
