• Got a Tipila, google, windows live or facebook account ?

Here's how to create CSS3 buttons with gradients which are cross browser compatible. Just like the ones in gmail and you tube.

Note - Rounded corners does not work with gradients in IE. So rounded corners are not used for IE.

.button
{
    color: #666;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #f6f6f6;
    padding: 0.3125em 1em;
    cursor: pointer;
    white-space: nowrap;
    overflow: visible;
    font-size: 1em;
    font-weight: bold;
    outline: 0 none /* removes focus outline in IE */;
    margin: 0px;
    line-height: 1.6em;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#efefef));
    background-image: -moz-linear-gradient(top,  #ffffff,  #efefef);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef');
}
.button::-moz-focus-inner
{
    border: none;
}
/* removes focus outline in FF */
.button:hover, .button:focus
{
    border-color: #999;
    background-color: #f0f1f3;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#ebebeb));
    background-image: -moz-linear-gradient(top,  #ffffff,  #ebebeb);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb');
}
.button:active
{
    background-color: #ddd;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#ffffff));
    background-image: -moz-linear-gradient(top,  #ccc,  #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#ffffff');
}

This is how to use it:

<button type="submit" class="button">my button text</button>
3
votes
Login to Tipila