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.

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. stalex on February 9, 2011

    Sorry, but on ie7,ie8 it hasn’t rounded corners, hover and shadow.

  2. Cre8ive Commando on February 9, 2011

    Yep, that’s right. The rounded corners and shadow will be lost in Internet Explorer. There are many ways to get rounded corners and drop shadows to work in IE (below) but they will require a whole new tutorial. Just keeping things simple for now. Plus they are a bit hacky and I don’t mind loosing rounded corners in IE.

    Rounded corners in IE: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
    Drop shadows in IE: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

  3. Kris on July 20, 2011

    Is it possible to make CSS only buttons that have icons before or after the button text?

  4. Jonathan on August 8, 2011

    This helped me a lot. Thanks!

  5. webdevdave on April 26, 2012

    Tutorial works great. Only one problem: Make sure to have the anchor class as “btn”.

    Example:

    I’m a Button!

    Otherwise it won’t work.

Trackbacks

  1. [...] posted here: How to Create CSS Only Buttons | Cre8ive Commando Tweet This Post Tags:  #bbb,  #button,  #css,  #design,  [...]

  2. [...] Read more: How to Create CSS Only Buttons | Cre8ive Commando [...]

  3. [...] More here: How to Create CSS Only Buttons | Cre8ive Commando [...]

  4. [...] This post was mentioned on Twitter by Adham Dannaway and Anthony Mills, Andrew Mathison. Andrew Mathison said: How to Create CSS Only Buttons: Buttons are an important part of nearly every website project or application but… http://bit.ly/gWFDJ0 [...]

  5. [...] How to Create CSS only Buttons [...]

  6. [...] How to Create CSS only Buttons [...]


Have your say!