thumbnail

CSS3 brings with it 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 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 brosers, like Chrome and Firefox, but also will look pretty good in older brosers, even IE6.

1772 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.

preview Create CSS3 Buttons Compatible with All Browsers

We`ll build the 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 Buttons in Photoshop

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

step1 Create CSS3 Buttons Compatible with All Browsers

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

step2 Create CSS3 Buttons Compatible with All Browsers

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

gradient Create CSS3 Buttons Compatible with All Browsers

stroke Create CSS3 Buttons Compatible with All Browsers

inner shadow Create CSS3 Buttons Compatible with All Browsers

drop shadow Create CSS3 Buttons Compatible with All Browsers

Now, the shape is stylized and looks pretty nice:

button shape Create CSS3 Buttons Compatible with All Browsers

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.

white drop shadow Create CSS3 Buttons Compatible with All Browsers

And now we have a button:

button orange Create CSS3 Buttons Compatible with All Browsers

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.

orange buttons Create CSS3 Buttons Compatible with All Browsers

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.

buttons Create CSS3 Buttons Compatible with All Browsers

Step 2: Coding the 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"> 
<head> 
<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" /> 

</head> 
 
<body> 
	<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-->
</body> 
</html>

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

body {
	font-family: Arial, Helvetica, sans-serif;			
	margin:0;
	padding:0;
}
a, a:hover {
	text-decoration:none;
}

#wrapper {
	margin:0 auto;
	padding-top:200px;
	width:560px;	
}

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 PIE.htc 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;
	font-weight:bold;
	padding: 7px 12px;
	cursor:pointer;	
	line-height:16px;
	display:inline-block;
	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;	
	-moz-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*gecko - mozilla*/ 
	-webkit-box-shadow:
		0px 1px 1px rgba(000,000,000,0.1),
		inset 0px 1px 1px rgba(255,255,255,0.7);/*new webkit - Chrome and Safari*/		
	behavior:url(PIE.htc);				
}

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(PIE.htc); 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 PIE.htc. 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 PIE.htc makes the job pretty well.

render Create CSS3 Buttons Compatible with All Browsers

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!

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • vrushali patil

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

  • http://buttons.com button

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

  • Dinesh Mor

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

    • http://www.OurTuts.com Madalin Tudose

      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.

  • Dinesh Mor

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

  • http://www.hostyasui.com govinda khatiwada

    Very much helpful tutorial . Keep up the good work :)

  • Erez

    Excellent article! Thanks a million!

  • John Redfish

    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 …

    John

    • http://www.OurTuts.com Madalin Tudose

      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!

  • http://alyssaroll.com Alyssa

    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 http://gradients.glrzad.com/

  • Pingback: Best CSS , CSS3 And CSS4 Tutorials From February 2012

  • http://www.designforce.us Hafeez Ansari

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

  • http://www.martijnoud.nl/ Martijn Oud

    Really digging the buttons. Bookmarked for future use :)

  • Daniel Piechnick

    Great tutorial. Thanks. :)

    Daniel Piechnick