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 (1001 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"> <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.
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!
