Create CSS gradient buttons without image.

Its a dream of any web designers to create css gradient button without image. There are lots of limitation in designing a web page for browser compatibility issue. For this reason we designer cannot express our creative thinking as we think. But from now i think we can express our creative idea without any hassle. We web designer always need to keep some point in our mind when designing a webpage.

One of the serious issue is web page load time. To do that always we try to make page smaller in size.we know that using image in design is a nightmare. Its always make our page heavy.


To get rid from this hassle CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. Here in this post i will show you how to code for the CSS gradient button to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

The XHTML is below:

<a href="http://webdeziners.blogspot.com/" class="red">http://webdeziners.blogspot.com/</a>

The css style is below:

.red {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fffbf9;
border: solid 1px #980401;
background: #c50503; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#ff8a50), to(#c30000)); /* For Webkit Browsers */
background: -moz-linear-gradient(top, #ff8a50, #c30000); /* for Firefox */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8a50', endColorstr='#c30000'); /* for IE */
}
.red:hover {
background: #c50503;
background: -webkit-gradient(linear, left top, left bottom, from(#c30000), to(#ff8a50));
background: -moz-linear-gradient(top, #c30000, #ff8a50);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c30000', endColorstr='#ff8a50');
}
.red:active {
border: solid 1px #ec3331;
color: #f9baae;
background: -webkit-gradient(linear, left top, left bottom, from(#dc3921), to(#ffb36a));
background: -moz-linear-gradient(top, #dc3921, #ffb36a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dc3921', endColorstr='#ffb36a');
}

If you use above css and html code the button will be look like following image :

Please note not all browsers support CSS gradient. To be safe, you shouldn’t rely on CSS gradient when coding the layout. It should only be used for enhancing the layout.Hope you enjoy it as much as i do.