码迷,mamicode.com
首页 > Web开发 > 详细

一种好看的HTML按钮样式

时间:2016-04-03 20:25:11      阅读:490      评论:0      收藏:0      [点我收藏+]

标签:

        发现一种简洁好看的 <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%);
}

 

--> -->

一种好看的HTML按钮样式

标签:

原文地址:http://www.cnblogs.com/robothy/p/5350440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!