Free Design Resources: CSS Buttons

Last month we created a set of buttons in Photoshop PSD format, that you can download, edit and use as you wish (if you haven’t already, you can still grab them here). This month we’ll be looking at how we can build these buttons using just CSS and HTML. That’s right, we’re not going to use any images to create these buttons, instead be building them by writing code. These buttons will work with the vast majority of modern browsers and with any of 34SP.com’s UK hosting account types. You can download the source code of this tutorial here.

To get started, simply add this line of code to your html document, in the ‘body’ section. This is our link, the text inside the a tag will be the text on our button.

[sourcecode language=”html”]
<a class=”button”>Click here to learn more</a>
[/sourcecode]

Next add the class ‘button’ in your document’s CSS, as shown below.

[sourcecode language=”css”]
.button {
}
[/sourcecode]

We now add the following code to the document’s CSS, inside the button class. Using the code below we can create a red button, with rounded corners. In order to get perfect rounded corners, please make sure your ‘border-radius’ is exactly half the number of pixels of your button’s height.

[sourcecode language=”css”]
.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.7em;
font-weight: bold;
text-decoration: none;
color: #fff;
display: inline-block;
text-align: center;
height: 26px;
padding: 0 10px;
-webkit-border-radius: 13px; /* Rounded Corners – Webkit Browsers */
-moz-border-radius: 13px; /* Rounded Corners – Gecko Browsers */
border-radius: 13px; /*  Rounded Corners – All Browsers */
border: 1px solid #a81b0c;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – Webkit Browsers */
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – Gecko Browsers */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – All Browsers */
text-shadow: 0 -1px #660000;
background: #891e13; /* Old browsers */
}
[/sourcecode]

Now we’re going to add a the background gradient, to make our button look even better. The 2 gradient colours I’m using are #bd2e1d & #891e13, although you can use any colours you wish. Creating gradients in CSS can be quite code heavy, to save time I used http://www.colorzilla.com/gradient-editor/, which will generate the gradient code for you.

Add the following code inside your css button class;

[sourcecode language=”css”]
background: -moz-linear-gradient(top, #bd2e1d 0%, #891e13 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd2e1d), color-stop(100%,#891e13)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* IE10+ */
background: linear-gradient(to bottom, #bd2e1d 0%,#891e13 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#bd2e1d’, endColorstr=’#891e13′,GradientType=0 ); /* IE6-8 */
[/sourcecode]

Your CSS should now look like this:

[sourcecode language=”css”]
.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.7em;
font-weight: bold;
text-decoration: none;
color: #fff;
display: inline-block;
text-align: center;
height: 26px;
padding: 0 10px;
-webkit-border-radius: 13px; /* Rounded Corners – Webkit Browsers */
-moz-border-radius: 13px; /* Rounded Corners – Gecko Browsers */
border-radius: 13px; /*  Rounded Corners – All Browsers */
border: 1px solid #a81b0c;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – Webkit Browsers */
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – Gecko Browsers */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset; /* Shadow – All Browsers */
text-shadow: 0 -1px #660000;
background: #891e13; /* Old browsers */
background: -moz-linear-gradient(top, #bd2e1d 0%, #891e13 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd2e1d), color-stop(100%,#891e13)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bd2e1d 0%,#891e13 100%); /* IE10+ */
background: linear-gradient(to bottom, #bd2e1d 0%,#891e13 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#bd2e1d’, endColorstr=’#891e13′,GradientType=0 ); /* IE6-8 */
}
[/sourcecode]

If you preview the code you’ve written so far in a browser, you should have something similar to this:

So, we are nearly there. We’ve managed to create a 3D button using just CSS and HTML. All we need to do now is create a ‘hover’ style, so that the button behaves like a button.

To create a hover style all we need to do is create a new style in the CSS, using the hover selector.

[sourcecode language=”css”]
.button:hover {
}
[/sourcecode]

Then we add code to change the buttons appearance. For the button’s hover state I’m just going to subtlety lighten the gradient background, but you can change whatever you want.

Add the following code to your hover class:

[sourcecode language=”css”]
.button:hover {
background: #bd2e1d; /* Old browsers */
background: -moz-linear-gradient(top, #d83825 0%, #bd2e1d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d83825), color-stop(100%,#bd2e1d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d83825 0%,#bd2e1d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d83825 0%,#bd2e1d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d83825 0%,#bd2e1d 100%); /* IE10+ */
background: linear-gradient(to bottom, #d83825 0%,#bd2e1d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d83825′, endColorstr=’#bd2e1d’,GradientType=0 ); /* IE6-8 */
}
[/sourcecode]

If you preview your button and hover over it with your mouse, it should look something like this

That completes this tutorial. You can of course, build on the code we’ve written here to add images, icons etc to your buttons. If you use any of the code featured in this tutorial, we’d love to hear from you so please feel free to leave a comment and let us know how you got on.

The CSS in this tutorial was written to be compliant with most modern browsers (including current versions of Chrome, Firefox, Safari and Internet Explorer). That means the CSS will work as intended on the majority of mainstream browsers, and will gracefully degrade when viewed on older or less compliant browsers.