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

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