HOW TO

How To Create Next and Previous Buttons

Learn how to create "next" and "previous" buttons with CSS

Next and Previous Buttons

How To Create Next and Previous Buttons

Step 1) Add HTML:

Example

<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>

<a href="#" class="previous round">‹</a>
<a href="#" class="next round">›</a>

Step 2) Add CSS:

Example

a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.previous {
background-color: #f1f1f1;
color: black;
}

.next {
background-color: #04AA6D;
color: white;
}

.round {
border-radius: 50%;
}

Try it Yourself »

Contact US

Email:

Content:

HOW TO

HOW TO

How To Create Next and Previous Buttons

Next and Previous Buttons