渐变按钮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了渐变按钮相关的知识，希望对你有一定的参考价值。
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 样式库。
以上是关于渐变按钮的主要内容，如果未能解决你的问题，请参考以下文章
将渐变层添加到具有相同名称 Xcode/Swift 的所有按钮