Create CSS3 Buttons Compatible with All Browsers

CSS3 buttons brings with them some awesome styling features, like rounded corners, gradients and borders, but also brings a lot of headaches to those who want to implement it inside web pages, due to Internet Explorer lack of support for these great features. If you feel guilty for making use of CSS3, don`t be, because I`m going to show you how you can create web elements only with CSS3 which are compatible with all browsers.

Today, I want to show you how to create some beautiful CSS3 buttons which make use of the latest CSS3 features and, most importantly, pass the cross-browser compatibility test, which means they will look awesome in modern browsers, like Chrome and Firefox, but also will look pretty good in older browsers, even IE6.

CSS3 Buttons (436 downloads)

How`s that possible? The solution I found is called CSS3 PIE (progressive internet explorer). PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features like border-radius, box-shadow, border-image, CSS3 Backgrounds, Gradients and RGBA Color Values.

We`ll build the CSS3 buttons in 2 steps. First step is designing the buttons in Photoshop. The second step is coding the buttons using HTML and CSS3.

Step 1: Designing CSS3 Buttons in Photoshop

Open Photoshop and create a new document of 600x350px. Grab the Paint Bucket Tool(G) and paint the canvas with white.

Now grab the Rounded Rectangle Tool(U), set a radius of 3px and draw a rectangle of 84x32px.

Let`s stylize the shape. We`ll build an orange button. Apply to the layer, the next styles:

Now, the shape is stylized and looks pretty nice:

Add the button text inside the shape using the Horizontal Type Tool(T). I used Arial font, a font-size of 12px and #7c5d1b color. Apply to text a thin drop shadow of 1px.

And now we have a button:

Now you can create the hover statement of the button by duplicating the 2 layers (button`s shape and text) and reversing the gradient overlay applied to the shape.

Using the same procedure, I created multiple color variations of the button, by simply changing the gradients and text-colors. If you still have doubts how I made the buttons, you can download the source files of the tutorial and open the PSD file. So, we have 8 beautiful buttons which will be converted to HTML/CSS.

Step 2: Coding the CSS3 Buttons with HTML/CSS3

Now that we designed the buttons, let`s write some code. Firstly create a new HTML file and add the starting html code and the code for the buttons. Then create a CSS file where you can store your styles and link it to the page (I called my CSS file buttons.css). For optimization, I created 2 classes named .button and .orange. The .orange class name can be changed with one of the colors: yellow, red, purple, lemon, blue, white, black. The .button class will have the common attributes of the buttons, like font-size, padding, box-shadow and border-radius, while the .orange class name will be populated with custom attributes like border-color and gradients.

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>CSS3 Buttons</title>

<link rel="stylesheet" href="buttons.css" type="text/css" media="screen" />


	<div id="wrapper">
		<a href="#" class="button orange">Button text</a>
		<a href="#" class="button green">Button text</a>
		<a href="#" class="button yellow">Button text</a>
		<a href="#" class="button blue">Button text</a>
		<a href="#" class="button red">Button text</a>
		<a href="#" class="button white">Button text</a>
		<a href="#" class="button purple">Button text</a>
		<a href="#" class="button black">Button text</a>
	</div><!--end wrapper-->

Now let`s stylize the page by adding some CSS to page elements(body, wrapper):

body {
	font-family: Arial, Helvetica, sans-serif;
a, a:hover {

#wrapper {
	margin:0 auto;

Before starting to stylize the buttons, please download the CSS3 PIE resource, unzip the archive and copy and paste inside the folder you`re working in, the file. As I told you in the beginning, the file makes possible some CSS3 features to render in IE browsers, even IE6.

Let`s continue with our buttons. The .button name class will receive the common styles the buttons will have, so please create the name class and add it the next css attributes:

.button {
	font-size: 12px;
	padding: 7px 12px;
	margin:0 15px 30px 15px;
	border-radius: 2px;
	-moz-border-radius: 2px;/*gecko - mozilla*/
	-webkit-border-radius: 2px; /*new webkit - Chrome and Safari*/
	box-shadow: #e3e3e3 0 1px 1px;
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*gecko - mozilla*/
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*new webkit - Chrome and Safari*/

As you can see, among the common attributes, there are a few special css styles. border-radius sets a radius of the box of 2px. box-shadow sets a thin shadow around the box and, the last line, behavior:url(; makes the border-radius and box-shadow to render in IE browsers. Unfortunately, at this moment, the PIE can`t deal with inset ( which is, in our case, the inner white shadow of 1px situated at the top of the shape).

Now let`s stylize the buttons. I`ll present you only the orange button and for the rest, you can grab the code from the source files of the tutorial.

The orange button will have 2 states: normal and hover state. In the hover state, we`ll change only the gradient order because the rest of the styles will be taken from the normal state.

.orange {
	text-shadow: 1px 1px 0px #ffe8b2;
	color: #7c5d1b;
	border: 1px solid #d6a437;
    background: #febd4b; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fed970) to(#febd4b)); /*old webkit*/
    background: -webkit-linear-gradient(#fed970, #febd4b); /*new webkit*/
    background: -moz-linear-gradient(#fed970, #febd4b); /*gecko*/
    background: -ms-linear-gradient(#fed970, #febd4b); /*IE10*/
    background: -o-linear-gradient(#fed970, #febd4b); /*opera 11.10+*/
    background: linear-gradient(#fed970, #febd4b); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#fed970, #febd4b); /*PIE*/


To stylize the hover state, just inverse the gradients. So instead of having a gradient from #fed970 to #febd4b, we`ll be having a gradient from #febd4b to #fed970.

.orange:hover {
    background: #febd4b; /*fallback for non-CSS3 browsers*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b) to(#fed970)); /*old webkit*/
    background: -webkit-linear-gradient(#febd4b, #fed970); /*new webkit*/
    background: -moz-linear-gradient(#febd4b, #fed970); /*gecko*/
    background: -ms-linear-gradient(#febd4b, #fed970); /*IE10*/
    background: -o-linear-gradient(#febd4b, #fed970); /*opera 11.10+*/
    background: linear-gradient(#febd4b, #fed970); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#febd4b, #fed970); /*PIE*/

As you can notice, in both classes, there is an attribute called -pie-background which makes possible rendering gradients in Internet Explorer.

This is how you can make buttons making use of CSS3 features with the help of a single file, called Following this example, you can make variations of the buttons by creating new classes and changing the gradients and border colors. You can see in the demo page more buttons I made and which can be downloaded for your use.

Below I posted an image with the buttons, after checking their browser compatibility. As you can see, modern browsers doesn`t have any problem displaying them correctly, while IE browsers can`t display inner shadows, nor text-shadow. I`m sure there are many tools which can help you obtain them, but makes the job pretty well.

That was all for today. Working with CSS3 and HTML5 can give you headaches when checking for cross-browser compatibility, but there are enough resources which can help you deal with the annoying IE browsers. I thank you for your time and if you have any questions, drop me a line in the comments section! Cheers!

[Total: 1    Average: 5/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. Daniel Piechnick on November 25, 2011 at 12:13 am Reply

    Great tutorial. Thanks. 🙂

    Daniel Piechnick

  2. Martijn Oud on December 30, 2011 at 7:43 am Reply

    Really digging the buttons. Bookmarked for future use 🙂

  3. Hafeez Ansari on January 31, 2012 at 8:21 am Reply

    Nice work. Great tutorials both for psd and css3. Thank you.

  4. […] Create CSS3 Buttons Compatible with All Browsers […]

  5. Alyssa on March 14, 2012 at 10:29 am Reply

    Here’s a great resource for generating CSS3 Gradients. You can even upload your image created in Photoshop!

    Saves me loads of time, hope it helps someone else out

  6. John Redfish on July 18, 2012 at 5:06 am Reply

    Thank for the effort in doing this … I have a really noobie question even though I’ve been doing backend work for a long time …

    I looked for references to any imaged and didn’t find any … what is the purpose of the Psd desig and files … is it just to get the color values to plug into css ???

    thanks …


    1. Madalin Tudose on July 19, 2012 at 1:50 am Reply

      Hi John,

      The downloadable files are a gift for you. The PSD file contains the design process of the buttons, while the html file contains the coded buttons. Enjoy!

  7. Erez on July 23, 2012 at 10:33 am Reply

    Excellent article! Thanks a million!

  8. govinda khatiwada on November 1, 2012 at 4:16 am Reply

    Very much helpful tutorial . Keep up the good work 🙂

  9. Dinesh Mor on November 7, 2012 at 3:09 am Reply

    nice great menu very useful for me but text shadow not working in ie why please resolve

  10. Dinesh Mor on November 7, 2012 at 3:10 am Reply

    in ie textshadow not working why please give me a solution for ie all version

    1. Madalin Tudose on November 15, 2012 at 4:10 pm Reply

      Hi. IE isn`t supporting CSS3 features. So I came up with a solution to this called CSS3 pie. Is not a native solution and you might encounter issues in IE.

  11. button on January 7, 2013 at 6:25 am Reply

    links are not buttons. If you turn JS off, there is no way to submit a form with a link

  12. vrushali patil on April 2, 2013 at 11:58 pm Reply

    Great Css But can u please help me where should i place a htc file ?

  13. Andy on May 20, 2016 at 11:30 am Reply

    The text inside the button is not centering. I am using Chrome 11.

Leave a Comment

Your email address will not be published. Marked fields are required.