宜宾网站建设公司

怎么用css3实现颜色渐变按钮

本篇内容介绍了“怎么用css3实现颜色渐变按钮”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网络空间、营销软件、网站建设、东丰网站维护、网站推广。

之前为大家分享很多纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图：

怎么用css3实现颜色渐变按钮

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.        Nominate Yourself  

  3.        Nominate Someone  

  4.        Buy Tickets Now  

  5.    

  

css3代码：

CSS Code复制内容到剪贴板

  1. .btn   

  2.         {   

  3.             display: inline-block;   

  4.             margin: 1em 0;   

  5.             padding: 1em 2em;   

  6.             background: transparent;   

  7.             border: 2px;   

  8.             border-radius: 3px;   

  9.             font-weight: 400;   

  10.             text-align: center;   

  11.         }   

  12.         .btn.green  

  13.         {   

  14.             box-shadow: 0 1px 0 1px rgba(43, 220, 146, 0.25), 0 -1px 0 1px rgba(129, 214, 106, 0.25), 1px 0 0 1px rgba(43, 220, 146, 0.25), -1px 0 0 1px rgba(129, 214, 106, 0.25), 1px -1px 0 1px rgba(86, 217, 126, 0.5), -1px 1px 0 1px rgba(86, 217, 126, 0.5), 1px 1px 0 1px rgba(0, 223, 166, 0.75), -1px -1px 0 1px rgba(173, 211, 86, 0.75);   

  15.         }   

  16.         .btn.green span   

  17.         {   

  18.             background: -webkit-linear-gradient(left, #add356, #00dfa6);   

  19.             -webkit-background-clip: text;   

  20.             -webkit-text-fill-color: transparent;   

  21.         }   

  22.         .btn.orange   

  23.         {   

  24.             box-shadow: 0 1px 0 1px rgba(255, 102, 43, 0.25), 0 -1px 0 1px rgba(255, 169, 69, 0.25), 1px 0 0 1px rgba(255, 102, 43, 0.25), -1px 0 0 1px rgba(255, 169, 69, 0.25), 1px -1px 0 1px rgba(255, 136, 56, 0.5), -1px 1px 0 1px rgba(255, 136, 56, 0.5), 1px 1px 0 1px rgba(255, 69, 31, 0.75), -1px -1px 0 1px rgba(255, 203, 82, 0.75);   

  25.         }   

  26.         .btn.orange span   

  27.         {   

  28.             background: -webkit-linear-gradient(left, #ffcb52, #ff451f);   

  29.             -webkit-background-clip: text;   

  30.             -webkit-text-fill-color: transparent;   

  31.         }   

  32.         .btn.blue  

  33.         {   

  34.             -webkit-border-image: -webkit-linear-gradient(left, #3dade9, #bf2fcb) round;   

  35.             border-image-slice: 1;   

  36.         }   

  37.         .btn.blue span   

  38.         {   

  39.             background: -webkit-linear-gradient(left, #3dade9, #bf2fcb);   

  40.             -webkit-background-clip: text;   

  41.             -webkit-text-fill-color: transparent;   

  42.         }   

  43.         .btn:nth-of-type(1)   

  44.         {   

  45.             float: left;   

  46.         }   

  47.         .btn:nth-of-type(2)   

  48.         {   

  49.             float: rightright;   

  50.         }   

  51.         .btn:nth-of-type(3)   

  52.         {   

  53.             width: 100%;   

  54.             clear: left;   

  55.             padding: .75em;   

  56.             font-size: 3em;   

  57.             font-weight: 100;   

  58.             line-height: 1;   

  59.             letter-spacing: 1px;   

  60.         }   

  61.            

  62.         *   

  63.         {   

  64.             -moz-box-sizing: border-box;   

  65.             box-sizing: border-box;   

  66.         }   

  67.            

  68.         body   

  69.         {   

  70.             font: normal 1em 'Helvetica Neue' , Helvetica, sans-serif;   

  71.             background: #1d2025;   

  72.             -webkit-font-smoothing: antialiased;   

  73.             text-rendering: optimizeLegibility;   

  74.         }   

  75.            

  76.         .container   

  77.         {   

  78.             width: 60%;   

  79.             margin: auto;   

  80.             position: absolute;   

  81.             top: 50%;   

  82.             left: 50%;   

  83.             -webkit-transform: translate(-50%, -50%);   

  84.             -ms-transform: translate(-50%, -50%);   

  85.             transform: translate(-50%, -50%);   

  86.         }   

  87.         .container:after   

  88.         {   

  89.             display: table;   

  90.             content: '';   

  91.             clear: both;   

  92.         }   

  93.            

  94.         a   

  95.         {   

  96.             color: inherit;   

  97.             text-decoration: none;   

  98.         }   

  99.            

  100.         h2.method1   

  101.         {   

  102.             background: -webkit-linear-gradient(left, #ef0, #f00);   

  103.             -webkit-background-clip: text;   

  104.             -webkit-text-fill-color: transparent;   

  105.         }  

“怎么用css3实现颜色渐变按钮”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


网站栏目：怎么用css3实现颜色渐变按钮
文章URL：http://ybzwz.com/article/ggeepg.html

其他资讯