Pure CSS3 Buttons with pressed effect and gradient background

In this tutorial we will create CSS Buttons with pressed, hover effect and gradient background without using any images at all! We will create the gradient colors effect using the gradient feature from WebKit, and also since Firefox 3.6+ we can create gradient using -moz-linear-gradient property.

Let’s start with the easy part, the HTML one. We have to create a simple link with a class attached, just like this:

<a href="#" class="button">Orange Button</a>

That was easy, huh?

Now, the CSS part, we will divide it in three steps, first we will create the normal state button, then the hovered state and in the final, the pressed button, but before we go, I will show you the gradient syntax.

The Chrome, Safari and other webkit browsers syntax looks like this:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

The Mozilla Firefox (Also works on Flock) syntax is like this:

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Ok, the first part (the normal state):

.button {
     padding: 5px 10px;
     background: -webkit-gradient(linear, left top, left bottom, from(#CC6633), to(#CC3300));
     background: -moz-linear-gradient(top,  #CC6633,  #CC3300);
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     text-shadow: 1px 1px #666;
     color: #fff;
     text-decoration: none;

As you can see, we have used the -moz-linear-gradient and -webkit-gradient attributes to create the gradient map, -moz-border-radius and -webkit-border-radius: 5px; attribute for the round edges (or border, however you want to call it), text-decoration to remove the underline link and the text-shadow wich works both on Firefox and Chrome to create the text shadow.

The second stage (the hover state):

.button:hover {
     background: #CC3300;

What we’ve done in the above code is pretty simple, we have changed only the background to a normal one, and add the hover attribute to the button class.

The third stage, and the last one:

.button:active {
     background: -webkit-gradient(linear, left top, left bottom, from(#CC3300), to(#CC6633));
     background: -moz-linear-gradient(top,  #CC3300,  #CC6633);

The last step was quite easy, we have used the active – this give us possibility to apply an effect when the mouse is pressed down, and again we have used the -webkit-gradient and -moz-linear-gradient property, and inversed the hex color, if first time we got #CC6633, #CC3300, now we have used #CC3300, #CC6633 to create the “inverse effect or press effect”.

That’s all you’re done now.

Check out our result. (DEMO).
Download this tutorial.
Unfortunately this buttons aren’t supported by any of Internet Explorer version, not even by the 9 version wich is set to launch in March this year, and sadly IE9 doesn’t have any property for the gradient map (maybe the final version will include one)


Comments are closed.