Wednesday 14 September 2011

Styles For The Button using CSS3


To create buttons you can use some simple codes for that using CSS3. Any type of image is not required if you create simple buttons or gradient buttons using CSS3.

Exp:

<div class="button">Hello!</div>

.button {
    display: inline-block; margin:20px;
    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 #960;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow:0 1px 2px #960;
    -moz-box-shadow: 0 1px 2px #960;
    box-shadow: 0 1px 2px #960;
    /*    -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);*/

}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

No comments:

Post a Comment