|
[tr][td]
之前为大家分享了推荐10款纯css3实现的实用按钮，今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变，效果非常好看，一起看下效果图： 图片：1047199pncjrcjw333kppw.jpg  在线预览 源码下载 实现的代码。 html代码： [*] [*] Nominate Yourself [*] Nominate Someone [*] Buy Tickets Now [*] 复制代码 css3代码： [*].btn [*] { [*] display: inline-block; [*] margin: 1em 0; [*] padding: 1em 2em; [*] background: transparent; [*] border: 2px; [*] border-radius: 3px; [*] font-weight: 400; [*] text-align: center; [*] } [*] .btn.green [*] { [*] 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); [*] } [*] .btn.green span [*] { [*] background: -webkit-linear-gradient(left, #add356, #00dfa6); [*] -webkit-background-clip: text; [*] -webkit-text-fill-color: transparent; [*] } [*] .btn.orange [*] { [*] 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); [*] } [*] .btn.orange span [*] { [*] background: -webkit-linear-gradient(left, #ffcb52, #ff451f); [*] -webkit-background-clip: text; [*] -webkit-text-fill-color: transparent; [*] } [*] .btn.blue [*] { [*] -webkit-border-image: -webkit-linear-gradient(left, #3dade9, #bf2fcb) round; [*] border-image-slice: 1; [*] } [*] .btn.blue span [*] { [*] background: -webkit-linear-gradient(left, #3dade9, #bf2fcb); [*] -webkit-background-clip: text; [*] -webkit-text-fill-color: transparent; [*] } [*] .btn:nth-of-type(1) [*] { [*] float: left; [*] } [*] .btn:nth-of-type(2) [*] { [*] float: right; [*] } [*] .btn:nth-of-type(3) [*] { [*] width: 100%; [*] clear: left; [*] padding: .75em; [*] font-size: 3em; [*] font-weight: 100; [*] line-height: 1; [*] letter-spacing: 1px; [*] } [*] [*] * [*] { [*] -moz-box-sizing: border-box; [*] box-sizing: border-box; [*] } [*] [*] body [*] { [*] font: normal 1em 'Helvetica Neue' , Helvetica, sans-serif; [*] background: #1d2025; [*] -webkit-font-smoothing: antialiased; [*] text-rendering: optimizeLegibility; [*] } [*] [*] .container [*] { [*] width: 60%; [*] margin: auto; [*] position: absolute; [*] top: 50%; [*] left: 50%; [*] -webkit-transform: translate(-50%, -50%); [*] -ms-transform: translate(-50%, -50%); [*] transform: translate(-50%, -50%); [*] } [*] .container:after [*] { [*] display: table; [*] content: ''; [*] clear: both; [*] } [*] [*] a [*] { [*] color: inherit; [*] text-decoration: none; [*] } [*] [*] h1.method1 [*] { [*] background: -webkit-linear-gradient(left, #ef0, #f00); [*] -webkit-background-clip: text; [*] -webkit-text-fill-color: transparent; [*] } 复制代码 注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10449 [/td][/tr] |
|
