Turning Links Into Buttons in CSS

Time for a practical lesson! In this tutorial we will be turning HTML Links into buttons! We will go down it step-by-step and create a demo page. At the end of the tutorial you can download a ZIP of the working page for your reference.

Nothing Is Set In Stone

Most things in CSS can be redefined. It’s this principle which will run through all our CSS3 Tutorials. It’s because of this flexibility that means you can turn a bullet list into a drop-down menu (tutorial coming soon!), can make bold text italic and can make an inline link look and behave like a button.

Keep this in mind as we go through this tutorial! Rather than just teach you the one principle, we’re going to create a full demo page to pull in principles from other tutorials!

Set Up Your Basic HTML5 Page

We are going to use a very basic HTML5 Page Layout. As it’s going to be a single page, there’s no need for navigation or a side bar, so we will just focus on having <article> and <footer> tags. On a full layout, you would also want a <header> </header> tag pair.

<!DOCTYPE html><html> <head>  <title>Turning Links Into Buttons - Demo File</title>  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">  <style type="text/css">        </style> </head> <body>  <article>   <h1>Turning Links Into Buttons</h1>   <p>    Welcome to this demo on turning links into buttons. This demo accompanies the tutorial on    <a href="http://resource-centre.net/css3-tutorials/turning-links-into-buttons/">http://resource-centre.net/css3-tutorials/turning-links-into-buttons/</a>   </p>  </article>  <footer>   <p>    To see the full source code for this page, use the 'View Source' or 'View Page Source' function in your browser.   </p>   <p>    Happy Coding!   </p>  </footer> </body>   </html>

Just a couple of points:

We are using the <link> tag method of embedding fonts in CSS.

For simplicity, I’ve chosen to put all the CSS inside <style> </style> tag pairs, rather than using the Link Tag. You can change this method to test your learning if you want to!

Setting Up Your Page Layout

In the next tutorial we will look at a full page layout, but let’s do some basics now. We need to define how the body, article and footer tags look. So here’s some CSS for you to play around with:

body{ background-color:#eeeeee; font-family:'Open Sans','Trebuchet MS','Verdana','Arial',sans-serif; color:#333; font-size:15px; margin:0 0 0 0;}article{ background-color:#ffffff; margin:10px 10px 10px 10px; padding:10px 10px 10px 10px; }footer{ background-color:#666666; color:#dddddd; text-align:center; padding:10px 10px 10px 10px; margin:10px 10px 10px 10px;}

Most of this you have seen though other CSS3 tutorials. The only exception is the use of padding and margin.

Padding: defines the space between the edge of an element and the stuff inside it.
Margin: defines the space around an element.

These two attributes take four values which correspond to (in this order): top, right, bottom, left. A detailed analysis of padding and margin deserves a tutorial of its own, but this should be enough for this lesson.

We have set a padding and margin of zero on the body{ }. This is important because different browsers can sometimes have a hidden ‘default’ for these. So specifying this gives you more control.

Both the article{ } and the footer{ } have 10 pixels’ worth of space around them.
And these also have 10px between their edges and the content inside
I have specified different background-colors so each area is clearly defined on our page.

Setting Up Dummy Links Ready to Be Turned Into Buttons

We need to set up some normal HTML Links but point them nowhere at this point. If you have URLs you want them to link to – feel free! We also want to make a feature of our new button links so want them to be in a separate ‘box’ on their own. Here’s the code snippet:

<div class="container"> <a href="#" class="button">Button 1</a> <a href="#" class="button">Button 2</a> <a href="#" class="button">Button 3</a> <a href="#" class="button">Button 4</a></div>

A link with href="#" just means it is an ’empty anchor’. This effectively points nowhere, but some browsers may send you back to the top of your page. But you need to specify a href attribute so that we can press our buttons!

I have wrapped our list of links in <div class="container"> – you’ll see why shortly. If this bit of code makes no sense to you, please hop over to our CSS Classes Tutorial!

For simplicity, I have given each of our links the same class – so we make them all look and behave the same.

Turn Those Links Into Buttons!

Here’s the CSS:

a{ text-decoration:none; color:#cc0000;}a.button,div.container{ float:left;}a.button{ background-color:#cc0000; border:1px solid #660000; border-radius:5px; color:#fff; margin-right:10px; padding:10px 10px 10px 10px;}

Note: we have removed the underline from links. I have also set a default text colour. So if we have in-paragraph links they will follow the rules set in a{ } with links containing class="button" building on that definition.

The new attributes in this code are:

border-radius: this sets the pixel size of the rounded corners – in this order: top left, top right, bottom right, bottom left. You can set different sizes on each corner if you want! Weird Button
border: this takes various values, but we use three of them here: the thickness of the border, the style of the border and its color. So for a.button we have a 1 pixel-width, solid, very dark red border.

Positioning the Buttons

We have wrapped the buttons in a container which we want to be on the left side of the page. And by using the , we also apply float:left; to each of our buttons, so they sit side-by-side.

If you refresh your page you should now have four buttons that look something like this:

Animating Our Buttons

The last bit to do is to make our buttons slightly interesting. Let’s make them a brighter red when they are clicked (or pressed) and give them a darker border. And for some fun, let’s move them up a little bit when we either hover or press them. Here goes:

a.button:active,a.button:focus,a.button:hover{ background-color:#ee0000; margin-top:-5px;}a.button:hover{ border:1px solid #000000;}

Lines 1-4: As our link can be ‘made active’ either by pressing it or by using the Tab key, we have applied a.button:active and a.button:focus. We then amend the background colour and use a negative margin-height to move it up 5px. As we also want this to happen if you have a cursor/mouse and you hover over it, we have added a.button:hover to this list as well!
Lines 5-7: Just to show we can do something else on :hover we have darkened the border when this happens.

If you’ve done this correctly your buttons should behave something like this:

Tidying Up the Container Behaviour

There’s one final glitch outstanding. Because our container is also set to float:left; any other text outside of that container might wrap around it – like when you do Word-Wrapping in Microsoft Word. To prevent that we can make sure it fills the full-width of the site, and force other elements to either be above or below it:

div.container{ width:100%; clear:both;}

The clear:both; here forces any other items around the <div class="container"> to not float next to it, but above or below it depending on where it is in the page.