How to Create a Pure CSS Web Button


Buttons are a very important part of a website. They’re the most common way your visitors can trigger an action and interact with your website. Sadly, even theses days many web pages still displays nasty buttons, so today I’ll show you how to create a good-looking web button using only CSS3 Code.

CSS button styling can be tricky and sometimes tedious. If you are a web designer and you’re looking for a simple and effective way of creating dynamic CSS button with cross browser compatibility, this tutorial is for you.

In this tutorial we use Cascading Style Sheets in version 3. CSS3 is the next generation stylesheet language. It introduces a lot of new and exciting features like shadows or border-radius, which we will use. The image below shows how the web button looks like.

Although the specifications have not been finalized yet, many web browsers have already started supporting the new CSS3 features, so before we start, You as a web designer must know few things.

Browser Support:
As a newer, CSS3 property, box-shadow has not yet been widely adopted by web browsers.

– Firefox 3.5 supports the feature as -moz-box-shadow, as well as multiple shadows, the inset keyword and a spread radius.

– Safari/WebKit has gone down a similar route as Firefox by implementing the feature as -webkit-box-shadow. Multiple shadows are supported since version 4.0, while neither inset shadows nor the spread radius feature are supported yet in WebKit.

– Opera, MsIE have not yet implemented the box shadow property.

To achieve the biggest possible coverage, it is advisable to define all three, the -moz, -webkit, and standard CSS3 syntax in parallel. Applicable browsers will then pick and adhere to the ones they support.

For example:
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;

So far, I have checked this button in:
Firefox 3.5 – works like a charm
Opera 11 – doesn’t work properly


STEP 1 – THE MARKUP – HTML

I wanted to keep the markup as simple as possible but at the same time flexible enough to accommodate various scenarios you would run into. The main link will have the class name of “css_button”. Here’s how the code looks like:


<!DOCTYPE html> 
<html> 
<head> 
<title>CSS3 COOL BUTTON</title> 
<link rel="stylesheet" href="style.css"> 
</head> <body> 
<form> 
<input class="css_button" type="submit" value="CLICK HERE"> 
</form> 
</body> 
</html>



STEP 2 – THE COLORS OF THE BUTTON

The second step is to choose colors for our CSS3 button, You can use Gimp, Inkscape, Adobe Photoshop or this simple tool for web designers: color sheme designer 3. It really does not matter what program you use, because we only need to define a color in RGB.



STEP 3 – STYLING THE BUTTON

The styling is incredibly simple, and I would like to encourage you to get creative with this for your own projects. Let’s style the button.


input[type="submit"].css_button {
margin-left: 10px;
background-color: #4a93a4;
width: 180px;
padding: 7px 10px;
color: rgba(9, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid #2c398d;
font-weight: bold;
font-size: 15px;	
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9); 	
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}

explanation of the CSS3 code:

border-radius – The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Examples:
border-bottom-right-radius: 20% 10%;
border-top-right-radius: 2px;
border-top-left-radius: 2px 2px;

box-shadow – The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

Examples:
box-shadow: 1px 1px 1px #FFFF00;
box-shadow: 7px 7px;
box-shadow: 1px 1px 5px blue;
box-shadow: inset 2px 2px 2px 2px #000000;
box-shadow: 2px 2px #000000, -2px -2px #C5C5C5, 0px 0px 4px 4px #FFDDFF;

The inset property will allow you to create an inner shadow in our web button. Which means that the gradient effect will be on the inside of the button.

text-shadow – The text-shadow declaration allows you to create a text shadow.

Examples:
text-shadow: 10px -5px 1px #000000;

The first three numeric values are the x-offset, y-offset and the blur respectively. The rgba values indicate the shadow color.



THE COMPLETE CODE


input[type="submit"].css_button {
margin-left: 10px;
background-color: #4a93a4;
width: 180px;
padding: 7px 10px;
color: rgba(9, 15, 30, 0.8);
text-transform: uppercase;
border: 1px solid #2c398d;
font-weight: bold;
font-size: 15px;	
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(25, 27, 9, 0.9); 	
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 5px 0 #3a79a4, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-transition: background 0.2s ease-out;
}
	
input[type="submit"].css_button:hover, input[type="submit"].css_button:focus {
background: #649eac;
border: 1px solid #186ca4;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.7), inset 0 2px 1px rgba(255, 255, 255, 0.5), 0 5px 0 #4886b1, 0 6px 0 #593a11, 0 13px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.7), inset 0 2px 1px rgba(255, 255, 255, 0.5), 0 5px 0 #4886b1, 0 6px 0 #593a11, 0 13px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.7), inset 0 2px 1px rgba(255, 255, 255, 0.5), 0 5px 0 #4886b1, 0 6px 0 #593a11, 0 13px 0 #ccc;
}
	
input[type="submit"].css_button:active {
background: #4a86a4;
border: 1px solid #183ea4;
position: relative;
top: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 0 #205993, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 0 #205993, 0 4px 0 #593a11, 0 8px 0 #ccc;
-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 3px 0 #205993, 0 4px 0 #593a11, 0 8px 0 #ccc;
}

That is it! Enjoy! :) Try the demo, download the files and of course let me know what you think about this tutorial :)


DOWNLOAD & LIVE DEMONSTRATION:

If you are lost at any point or couldn’t follow up with the tutorial, download it to your desktop and it will work just fine.

1. Download Source
2. View Live Demo

I think CSS3 will be a powerful tool for web designers and I hope you enjoyed this tutorial. Feel free to experiment with this web button.


May.23, 2011/Coding, HTML and CSS Coding, Tutorials/Comments 6

6 Comments to “How to Create a Pure CSS Web Button”

  1. Derek | May 23rd, 2011 at 20:58

    Thanks a lot for explaining how to create a pure css3 web button. This is certainly an excellent tutorial.

  2. Lex Koff | May 24th, 2011 at 20:34

    The tutorial is awesome and really easy to understand and follow. Thanks for sharing !

  3. Reality Dodge | June 10th, 2011 at 23:58

    Maybe the first time ever that I searched for something and found the right way to do it on the first try. Really well done tutorial.

  4. yulia | August 22nd, 2011 at 09:03

    awesome. thankyou for sharing :)

  5. bpb | November 6th, 2011 at 02:45

    I doesn’t work, the link to you live demo doesn’t work, What a waste of time

  6. Bartek | November 6th, 2011 at 09:16

    With what you have a problem? Everything works as it should. Here you have a preview of this button: http://freewebelements.com/examples/button/

    Maybe you have an old browser that does not support CSS3 ?