一种好看的HTML按钮样式

发现一种简洁好看的 <input type="submit" value="Register" /> 按钮样式。

样式预览

CSS代码

form input[type=submit]{

    border: 1px solid #004C9B;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
    color: #D3EBFF;
    cursor: pointer;
    display: block;
    font: bold 24px Cambria,"Hoefler Text",serif;
    margin: 230px auto 0;
    padding: 10px;
    text-shadow: 0 -1px 0 #444444;
    width: 410px;

    background-color:#0496DA;

    background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
    background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
}

form input[type=submit]:hover{

    background-color:#0383d3;

    background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
    background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
    background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
    background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
    background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
}

form input[type=submit]:active{

    background-color:#026fcb;

    background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
    background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
    background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
    background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
    background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
}

--> -->