首页 > 代码库 > 渐变按钮
渐变按钮
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>渐变按钮</title> 6 <style type="text/css"> 7 .button { 8 display: inline-block; 9 position: relative;10 margin: 10px;11 padding: 0 20px;12 text-align: center;13 text-decoration: none;14 font: bold 12px/25px Arial, sans-serif;‘15 16 text-shadow: 1px 1px 1px rgba(255,255,255, .22);17 18 -webkit-border-radius: 2px;19 -moz-border-radius: 2px;20 border-radius: 2px;21 22 /*-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);23 -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);24 box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);*/25 26 -webkit-transition: all 0.15s ease;27 -moz-transition: all 0.15s ease;28 -o-transition: all 0.15s ease;29 -ms-transition: all 0.15s ease;30 transition: all 0.15s ease;31 32 border: solid 1px #78afcd;33 34 }35 .blue {36 color: #2b6fa0;37 38 background: #B4E9F9; /* Old browsers */39 background: -moz-linear-gradient(top, #f6fafb 0%, #c1e8fd 100%); /* FF3.6+ */40 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6fafb), color-stop(100%,#c1e8fd)); /* Chrome,Safari4+ */41 background: -webkit-linear-gradient(top, #f6fafb 0%,#c1e8fd 100%); /* Chrome10+,Safari5.1+ */42 background: -o-linear-gradient(top, #f6fafb 0%,#c1e8fd 100%); /* Opera 11.10+ */43 background: -ms-linear-gradient(top, #f6fafb 0%,#c1e8fd 100%); /* IE10+ */44 background: linear-gradient(top, #f6fafb 0%,#c1e8fd 100%); /* W3C */45 46 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f6fafb, endColorstr=#c1e8fd);/*IE<9>*/47 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f6fafb, endColorstr=#c1e8fd)";/*IE8+*/48 49 }50 51 a.button:hover {52 background: #B4E9F9; /* Old browsers */53 background: -moz-linear-gradient(top, #faf9f7 0%, #a2e3fb 100%); /* FF3.6+ */54 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faf9f7), color-stop(100%,#a2e3fb)); /* Chrome,Safari4+ */55 background: -webkit-linear-gradient(top, #faf9f7 0%,#a2e3fb 100%); /* Chrome10+,Safari5.1+ */56 background: -o-linear-gradient(top, #faf9f7 0%,#a2e3fb 100%); /* Opera 11.10+ */57 background: -ms-linear-gradient(top, #faf9f7 0%,#a2e3fb 100%); /* IE10+ */58 background: linear-gradient(top, #faf9f7 0%,#a2e3fb 100%); /* W3C */59 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f6fafb, endColorstr=#a2e3fb);/*IE<9>*/60 -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f6fafb, endColorstr=#a2e3fb)";/*IE8+*/61 62 }63 64 </style>65 </head>66 <body style="background:#f4f4f4;">67 <a href="#none" class="button blue">按钮1</a>68 <a href="#none" class="button gray">按钮1</a>69 </body>70 </html>
拓展阅读 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。
渐变按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。