Design một gradient button bằng CSS3

- Hôm nay mình muốn chia sẻ cùng các bạn cách design một gradient button bằng css3. Một điều hết sức thú vị là chúng ta không cần sử dụng image or script nhưng vẫn có thể design một button hết sức sống động, điều này chỉ có thể thực hiện được với css3 như hình bên dưới :

- Để bắt đầu design button như trên, ta cần chú ý một vài thuộc tính mới trong css3 như sau :

  

- Lưu ý : -moz : là tiền tố để biết css3 hỗ trợ trên trình duyệt nào. Chẳng hạn như : -moz : FireFox và -webkit : Sarafi.

   - Css cho button : 

 

    

  - Ở đây mình design để support cho 3 trình duyệt là : FF, IE và Sarafi. Tuy nhiên, CSS3 sẽ ko thực thi được trên IE8 trở xuống, do đó mà button này sẽ không có corner như hình bên dưới : 

   

- Tuy nhiên, thì tương lai không xa IE9 sắp release thì sẽ có support CSS3 thôi, lúc đó mọi thứ sẽ hoàn hảo.

   - Và phần cuối cùng không thể thiếu để hoàn chỉnh một button là code HTML .

 - CSS và Code HTML hoàn chỉnh :

    

 <style>
    .button
    {
        display:inline-block;
        font-size:12px;
        height:25px;
        width:100px;
        line-height:25px;
        text-align:center;
        border:1px solid #081ba3;
        color:#fff;
        -moz-border-radius:5px;
        text-shadow:1px 1px 1px #000;
        font-family:Sans-Serif, Tahoma;
        font-weight:bold;
        background:-moz-linear-gradient(top, #0327db, #3a59f7);
        background:-webkit-gradient(linear, top left, #0327db, #3a59f7);
        -moz-box-shadow:1px 1px 1px #051485;
        text-decoration:none;
        cursor:pointer;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0327db, endColorstr=#3a59f7);
    }
    .button:hover
    {
        background:-moz-linear-gradient(top, #021058, #0d33f8);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#021058, endColorstr=#0d33f8);
    }
    
</style>
<a href="#" class="button">Button</a>