Coding a Button with CSS Only

When I found out how to create CSS buttons, it was like someone handed me a big, free piece of candy. Finally, no more time spent in Illustrator drawing buttons, variations for buttons and making sure all of them lined up and worked when someone moused over them! So here’s a beginner’s guide to creating some fancy CSS buttons!

First thing’s first, we have to create a link in HTML with a CSS class so we can style our fancy new button. Here’s what my code looks like:

 <a href="http://www.google.com" class="fancy_button">
Go to Google</a>

All right! So we got the first step in making a pretty button. But, if you preview your button right now, it’ll probably look something like this:

Go to Google

Yeaaaah, not the beautiful button we were expecting. That’s where the CSS class that we defined (fancy_button) comes into play. When we declared a class for the HTML link that we made, we’re telling the link to go search in our linked CSS Stylesheet for a class called .fancy_button and pull the styling options for our button from there.

Let’s add some styling to our link to make it more button-like. First I declare the link as a block element. By default, links are inline elements. We are making our fancy_button link a block element instead so we can manipulate different parameters such as background color. So, your CSS should look like this:

.fancy_button {
 display: block;
 }

In the above code, I’m declaring a CSS class named fancy_button so our link will know where its class styles are being referenced. Then I declared a display: block to make the link behave like a block element instead of an inline element. It still won’t look like much if you preview things at this stage. But let’s add a background color and see how that mixes things up:

.fancy_button {
 display: block;
 background: #62869b;
 }

Your button should now look like this:

The button has a background.
The button has a background.

Still doesn’t look like much of a button, right? Part of that is because there are no defined widths or heights for our button. So it assumes an automatic height, and an automatic width. The nature of a block element is to assume that it should take up the entire width of a page unless told otherwise. Let’s tell it otherwise now.

I’m going to give my button a set width so it doesn’t stretch all the way across my page, and I’ll give it a bit more height so there’s some padding between my link name and the edges of the button. Here’s my CSS code now:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 }

And here’s what your button should look like now:

It's slowly coming together.
It’s slowly coming together.

Some problems with our button still, but let’s remedy the most immediate one which is the text of the button sitting in the upper left. We can resolve this issue by using some padding on the text to push it down into the middle and then center aligning it on the button:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 }

OK, I added a text-align that centers our text and then some padding to push our link down to the middle. I arrived at the padding amount of 25px at the top by dividing 50 in half. You can do this to other height values too. For example, if you had a button that was 20px high, you’d push your text down by 10px or 20px divided in half. Anyway, here’s what the button looks like now:

Now things are aligned properly.
Now things are aligned properly.

OK, let’s do something about that ugly font and link color. I’m going to go with a web standard to keep things easy, but I’ll definitely do something about that default blue. And while I’m at it, I’m going to get rid of the underline too:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 25px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 }

I’ve added a font declaration that told my button to display the text as 12px Verdana (and some fallbacks), with a white color and to get rid of that unnecessary underline. Now here’s what things look like:

Text looks a bit better.
Text looks a bit better.

Before we go on to modify what the button will do when someone mouses over it, let’s fancy it up even more with some rounded corners to make it a little more interesting to look at:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

I added a border-radius of 15px that will affect all four corners to my button, and since border-radius is one of those CSS3 things that are in the works, I’ve included a browser prefix for Webkit and Mozilla-based browsers. Also I’ve noticed the text on our button doesn’t look like it’s sitting quite in the middle. So I increased our padding from the top to 30px. Here’s what our button looks like:

looks more button like, already.
looks more button like, already.

I’m pretty happy with the button right now. So let’s go on and define how the button will react when a user mouses over it. For this, we’re going to need a pseudo class that does something when a user hovers (or mouses) over the button. Here’s my CSS:

.fancy_button {
 display: block;
 background: #62869b;
 width: 200px;
 height: 50px;
 text-align: center;
 padding: 30px 0 0 0;
 font: 1.2em/12px Verdana, Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
 -webkit-border-radius: 15px;
 -khtml-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

 .fancy_button:hover {
 background: #3e5a6b;
 }

I used a pseudo class on my .fancy_button class to tell it to change its background color when someone hovers their mouse over the button. So now when you visit your button, someone hovering over it will change the button’s background color to something darker:

Hovering over the button makes it a darker color.
Hovering over the button makes it a darker color.

That was vastly easier to do than in the old days when you had to work with Javascript, or replace images in your CSS. At this point, you should have a pretty nicely working button. You can take it to the next level too and add shadows, gradients, and even transitions. But maybe that’s a tutorial for another day–or maybe you want to play around with that stuff on your own and see what masterpieces you’ll come up with.

Click here to download the source code for this tutorial.

Good luck on your button creation adventures!


Posted

in

by

Tags: