CSS3 Gradient Buttons

June Huang's picture

The gradient property in CSS3 allows us to display smooth transitions of colors on page elements without the use of images or JavaScript. This property is now supported by major browsers like Internet Explorer, Firefox, Chrome, and Safari. Below I will demonstrate how to use this property to create gradient buttons.

Button CSS:

.button {

display: inline-block;
padding: 6px 22px;
-webkit-box-shadow: 1px 1px 0px 0px #FFF6AD;
-moz-box-shadow: 1px 1px 0px 0px #FFF6AD;
box-shadow: 1px 1px 0px 0px #FFF6AD;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #FFCC00;
color: #333333;
font: 14px Arial;
text-shadow: 1px 1px 0px #FFB745;

}

.button:active {

position: relative;
top: 1px;

}

Gradient CSS:

.yellow {

background-color: #FFDE00; /* Fallback for old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FFDE00), color-stop(100%, #FFCC00)); /* Chrome, Safari */
background: -moz-linear-gradient(center top, #FFDE00 10%, #FFCC00 100%); /* FF */
background: -ms-linear-gradient(top, #FFDE00 10%, #FFCC00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFDE00', endColorstr='#FFCC00'); /* IE6-9 */

}

.yellow:hover {

background-color: #FFCC00; /* Fallback for old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #FFCC00), color-stop(100%, #FFDE00)); /* Chrome, Safari */
background: -moz-linear-gradient(center top, #FFCC00 10%, #FFDE00 100%); /* FF */
background: -ms-linear-gradient(top, #FFCC00 10%, #FFDE00 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFCC00', endColorstr='#FFDE00'); /* IE6-9 */

}

Button HTML:

<input type="button" class="button yellow" value="Click Me!"/>

Result: