Glossy CSS Button #01

by panique

HTML

<a target="_blank" href="http://themeforest.net/item/brandnew-10-in-1-businessportfolioblog/144589" class="button">Buy Now</a>

CSS

body {
    margin:30px;    
}

.button {
    
background-image: linear-gradient(top, rgb(6,163,194) 40%, rgb(0,127,186) 70%);
background-image: -o-linear-gradient(top, rgb(6,163,194) 40%, rgb(0,127,186) 70%);
background-image: -moz-linear-gradient(top, rgb(6,163,194) 40%, rgb(0,127,186) 70%);
background-image: -webkit-linear-gradient(top, rgb(6,163,194) 40%, rgb(0,127,186) 70%);
background-image: -ms-linear-gradient(top, rgb(6,163,194) 40%, rgb(0,127,186) 70%);

background-image: -webkit-gradient(
    linear,
    right top,
    right bottom,
    color-stop(0.4, rgb(6,163,194)),
    color-stop(0.7, rgb(0,127,186))
);
    
  
    border: 1px solid #069FED;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    color: #FFFFFF;
    display: inline-block;
    font-family: Helvetica,sans-serif;
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 70px;
    padding: 0 21px;
    text-decoration: none;
    text-shadow: 0 1px 0 #048EE8;
}


.button:hover {
 
    
     background-image: linear-gradient(top, rgb(9,213,254) 40%, rgb(3,175,254) 70%);
    background-image: -o-linear-gradient(top, rgb(9,213,254) 40%, rgb(3,175,254) 70%);
    background-image: -moz-linear-gradient(top, rgb(9,213,254) 40%, rgb(3,175,254) 70%);
    background-image: -webkit-linear-gradient(top, rgb(9,213,254) 40%, rgb(3,175,254) 70%);
    background-image: -ms-linear-gradient(top, rgb(9,213,254) 40%, rgb(3,175,254) 70%);
    background-image: -webkit-gradient(
        linear,
        right top,
        right bottom,
        color-stop(0.4, rgb(9,213,254)),
        color-stop(0.7, rgb(3,175,254))
    );   
}