Gradient Buttons (Using Box-Shadow)

HTML
<section class="container"> <article class="buttons box"> <a class="btn green" href=""> <span>Gradient Button #1</span> </a> <a class="btn orange" href=""> <span>Gradient Button #2</span> </a> <a class="btn blue" href=""> <span>Gradient Button #3</span> </a> </article> </section>
SCSS
$yellow: #add356; $teal: #00dfa6; $lorange: #ffcb52; $dorange: #ff451f; $blue: #3dade9; $purple: #bf2fcb; @mixin box-gradient($from, $to, $weight: 0) { $mix-main: mix($from, $to); $mix-sub-from: mix($mix-main, $from); $mix-sub-to: mix($mix-main, $to); box-shadow: -1px 0 0 $weight rgba($from, .75), -1px -1px 0 $weight rgba($mix-sub-from, .25), -1px 1px 0 $weight rgba($mix-sub-from, .25), 0 -1px 0 $weight rgba($mix-main, .5), 0 1px 0 $weight rgba($mix-main, .5), 1px -1px 0 $weight rgba($mix-sub-to, .25), 1px 1px 0 $weight rgba($mix-sub-to, .25), 1px 0 0 $weight rgba($to, .75); } @mixin border-gradient($from, $to, $width) { border-left: $width solid $from; border-right: $width solid $to; background-image: linear-gradient(left, $from, $to), linear-gradient(left, $from, $to); background-size: 100% $width; background-position: 0 100%, 0 0; background-repeat: no-repeat; background-clip: border-box; } @mixin border-image($from, $to, $width) { border-image: linear-gradient(left, $from, $to); border-image-slice: 1; border-image-width: $width; } @mixin font-gradient($from, $to, $dir) { background: -webkit-linear-gradient($dir, $from, $to); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn { display: inline-block; margin: 1em 0; padding: 1em 2em; background: transparent; border-radius: 3px; font-weight: 400; text-align: center; } .green span { @include font-gradient($yellow, $teal, left); } .orange span { @include font-gradient($lorange, $dorange, left); } .blue span { @include font-gradient($blue, $purple, left); } .green, .orange, .blue { padding: .75em; font-size: 3em; font-weight: 100; line-height: 1; letter-spacing: 1px; } .box { .green { @include box-gradient($yellow, $teal, 1px); } .orange { @include box-gradient($lorange, $dorange, 1px); } .blue { @include box-gradient($blue, $purple, 1px); } } * { box-sizing: border-box; } body { font: normal 1em 'Helvetica Neue', Roboto, 'Open Sans', Helvetica, Arial, sans-serif; background: #1d2025; margin-top: 2em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .container { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; } .buttons { display: flex; flex: 1 0 1; flex-wrap: wrap; flex-direction: column; padding: 1em; } p { color: white; text-align: center; text-shadow: 0 0 10px rgba($blue,.5); } .btn { align-self: center; &.blue { align-self: stretch; } } a { color: inherit; text-decoration: none; }
JAVASCRIPT
Expand for more options Login