How to Create CSS Only Buttons

Buttons are an important part of nearly every website project or application but there are a lot of ways to build them. Some people like to simply use flat images, others are a bit more clever and use CSS Sprites, some even use the sliding doors method to create dynamic width buttons but I’m going to take it a step further and show you how to create a button using absolutely no images!

There are many advantages to using CSS only buttons including:

• Lightweight loading as no images need to be downloaded
• Buttons expand to fit any amount of text
• Easy to alter the size, colour and effects

The button I’ll show you how to make has a CSS gradient, rounded corners and also a drop-shadow (The rounded corners and drop shadow will degrade gracefully in Internet Explorer).

Here’s the finished CSS only button that we’ll be making:

I'm a Button!

CSS Only Button

The HTML:

Since a button is really just a fancy looking link I think it makes sense to create our buttons from standard html links. Here is the HTML we need for our CSS only buttons. The span is there just in case you want to add icons to your buttons at a later stage.

<a href="#"><span>I'm a Button!</span></a>

The CSS:

In our CSS we will need gradient styles, drop-shadow styles, rounded corner styles and of course our basic button styles. Here is the CSS for our no image button.

<style>

/* Button */
a.btn{border:#BBB 1px solid; color:#5f5e5e; display:block; float:left; padding:12px 15px; margin-right:10px; cursor:pointer;}
a:hover.btn{text-decoration:none; background:#FFF;}

/* Rounded Corners */
.rounded, a.btn{
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius: 6px;
}

/* Drop Shadow */
.shadow, a.btn{
-moz-box-shadow: 0px 1px 3px #AAA;
-webkit-box-shadow: 0px 1px 3px #AAA;
box-shadow: 0px 1px 3px #AAA;
}

/* Default Grey Gradient */
.gradient, a.btn{
background: #FFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #DDD); /* for firefox 3.6+ */
}
</style>

That’s it, you’re all done. You can change the colour of the gradient and also tweak the drop shadow and rounded corners if you like. You can also try creating a few more coloured gradients and applying them to different buttons. It’s hard to believe that these buttons use no images but I guess that just shows you the power of CSS.

Tags: button that fits any text, button with no images, css only button, dynamic button, expandable button, html and css button, no image button, pure css button, sliding doors button