Custom CSS pagination

Mandy van Zetten
18-07-2017

On my latest project I have been working with CSS(3) and had to make a custom pagination. To be able to make this possible I had to use some pseudo-classes to be able to manipulate the changing view of it.

HTML

So let’s make de HTML to show u how I’ve done it.

First of all I will show you a static version of my HTML with only the class pagination and some <a> elements.

<div class="pagination">
<a>«</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>»</a>
</div>

I worked with SAP so the normal styling of it wasn’t that nice.

CSS

First here in the CSS I gave them a border that goes around the top, left and bottom only to not overlap some borders.


.pagination a {
color: #007bc7;
float: left;
padding: 10px 16px;
text-decoration: none;
border-right: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
}

To complete the border I choose the first <a> of the HTML with the pseudo element :first-child,

Because all the other borders left the left border out we’re giving it to the first class to make it a square.


.pagination a:first-child {

border-left: 1px solid #bfbfbf;

}

It will look like this

Next we proceed to look at the squares with pagination in it to show you that your mouse is hovering over it with the pseudo-class :hover, this pseudo-class only gets used when the action is hover.


.pagination a:hover {
background-color: #346187;
color: #FFF;
}

We give the square a color and change the color of the text as well to make clear we are hovering over it.

at last if we have a hover  hence we also need a click, to know that this is the one we clicked on, we do this by using the pseudo-class :active in the same way we used the previous pseudo-classes.


.pagination a:active {

background-color: #000;

color: #FFF;

}

There are many more pseudo-classes you can use here.

LEAVE A REPLY

you might also like