Simple CSS gradient

CSS has continued to simplify common design operations and CSS3 doesn't show any signs of that trend changing. Gradients, which have been around for awhile now have commonly replaced the old way of creating custom images for a couple quick css lines of code.


.orange-gradient
{
background: #f78d1d; /* initial background for default */
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /*Webkit Chrome/Safari etc.. */
background: -moz-linear-gradient(top, #faa51a, #f47a20); /*mozilla*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* IE */
}


This would make a great orange gradient for a background. Another great trick is to reverse the gradient on hover


.orange-gradient:hover
{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}



Add this class to a button or link, add some padding and you have a quick and great-looking button.