Home >Web Front-end >HTML Tutorial >A color gradient button implemented in pure css3_html/css_WEB-ITnose

A color gradient button implemented in pure css3_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:54:171986browse

I previously shared with you a recommendation of 10 practical buttons implemented in pure CSS3. Today I bring you a color gradient button implemented in pure CSS3. The color of the border and text of this button realizes the gradient of two colors through CSS3. The effect is very beautiful. Let’s take a look at the renderings:

Online preview Source code download

Implemented code.

html code:

 <div class="container">        <a target="_blank" class="btn green" href="http://www.w2bc.com/"><span>Nominate Yourself</span></a>        <a target="_blank" class="btn orange" href="http://www.w2bc.com/"><span>Nominate Someone</span></a>        <a target="_blank" class="btn blue" href="http://www.w2bc.com/"><span>Buy Tickets Now</span></a>    </div>

css3 code:

  .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;        }

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn