<article class="buttons clip">
<p>Background Clip<br><small>( 2025 new best )</small><br><em><a href="https://caniuse.com/mdn-css_properties_background-clip_border-area" target="_blank">Currently only Safari 18.2+</a></em></p>
<a class="btn green" href=""><span>Nominate Yourself</span></a>
<a class="btn orange" href=""><span>Nominate Someone</span></a>
<a class="btn blue" href=""><span>Buy Tickets Now</span></a>
</article>
<article class="buttons box">
<p>Box Shadow Gradient<br><small>( looks alright )</small></p>
<a class="btn green" href=""><span>Nominate Yourself</span></a>
<a class="btn orange" href=""><span>Nominate Someone</span></a>
<a class="btn blue" href=""><span>Buy Tickets Now</span></a>
</article>
<article class="buttons border">
<p>Border Gradient<br><small>( best option )</small></p>
<a class="btn green" href=""><span>Nominate Yourself</span></a>
<a class="btn orange" href=""><span>Nominate Someone</span></a>
<a class="btn blue" href=""><span>Buy Tickets Now</span></a>
</article>
<article class="buttons border-image">
<p>Border Image Gradient<br><small>( no border radius )</small></p>
<a class="btn green" href=""><span>Nominate Yourself</span></a>
<a class="btn orange" href=""><span>Nominate Someone</span></a>
<a class="btn blue" href=""><span>Buy Tickets Now</span></a>
</article>
// Variables
$yellow: #add356;
$teal: #00dfa6;
$lorange: #ffcb52;
$dorange: #ff451f;
$blue: #3dade9;
$purple: #bf2fcb;
/* Mixins */
@mixin bg-clip($from, $to, $weight: 0) {
background-image: linear-gradient($from, $to);
background-origin: border-box;
background-clip: border-area;
border: $weight solid transparent;
}
@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:
// left - start color
-1px 0 0 $weight rgba($from, .75),
// top left - mix of two colors plus start
-1px -1px 0 $weight rgba($mix-sub-from, .25),
// bottom left - mix of two colors plus start
-1px 1px 0 $weight rgba($mix-sub-from, .25),
// top mid - mix of two colors
0 -1px 0 $weight rgba($mix-main, .5),
// bottom mid - mix of two colors
0 1px 0 $weight rgba($mix-main, .5),
// top right - mix of two colors plus end
1px -1px 0 $weight rgba($mix-sub-to, .25),
// bottom right - mix of two colors plus end
1px 1px 0 $weight rgba($mix-sub-to, .25),
// right - end color
1px 0 0 $weight rgba($to, .75);
}
@mixin border-gradient($dir, $from, $to, $width) {
border-left: $width solid $from;
border-right: $width solid $to;
background-image:
// Needed for both the top and bottom borders
linear-gradient(to $dir, $to, $from),
linear-gradient(to $dir, $to, $from);
background-size: 100% $width;
background-position: 0 100%, 0 0;
background-repeat: no-repeat;
background-clip: padding-box;
}
@mixin border-image($from, $to, $width) {
border: $width solid transparent;
border-image: linear-gradient(to left, $from, $to);
border-image-slice: 1;
border-image-width: $width;
}
@mixin font-gradient($from, $to, $dir) {
background: linear-gradient(to $dir, $from, $to);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn {
padding: 1rem 2rem;
background: transparent;
border-radius: 6px;
font-weight: 400;
}
.green span {
@include font-gradient($yellow, $teal, left);
}
.orange span {
@include font-gradient($lorange, $dorange, left);
}
.blue span {
@include font-gradient($blue, $purple, left);
}
.blue {
font-weight: 400;
}
/* Background Clip Technique
/* Currently only available in Safari 18.2+
*/
.clip {
.green {
@include bg-clip($yellow, $teal, 1px);
}
.orange {
@include bg-clip($lorange, $dorange, 1px);
}
.blue {
@include bg-clip($blue, $purple, 1px);
}
}
/* Box-Shadow Technique */
.box {
.green {
@include box-gradient($yellow, $teal, 1px);
}
.orange {
@include box-gradient($lorange, $dorange, 1px);
}
.blue {
@include box-gradient($blue, $purple, 1px);
}
}
/* Gradient & Border Technique */
.border {
.green {
@include border-gradient(left, $yellow, $teal, 2px);
}
.orange {
@include border-gradient(left, $lorange, $dorange, 2px);
}
.blue {
@include border-gradient(left, $blue, $purple, 2px);
}
}
/* Border Image Gradient Technique */
.border-image {
.green {
@include border-image($yellow, $teal, 2px);
}
.orange {
@include border-image($lorange, $dorange, 2px);
}
.blue {
@include border-image($blue, $purple, 2px);
}
}
/* Stage Styles */
body {
font: normal 1em system-ui, sans-serif;
background: #1d2025;
min-block-size: 100lvh;
display: grid;
grid-template-columns: repeat(auto-fit, 15rem);
gap: 4rem;
margin: 0;
place-content: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.buttons {
display: grid;
gap: 1rem;
justify-items: center;
align-items: center;
background: hsla(0 0% 0% / 0.1);
padding-block: .5rem 1rem;
border-radius: 1.5em;
}
p {
color: white;
text-align: center;
text-shadow: 0 0 10px rgba($blue,.5);
}
em {
font-size: .75em;
color: wheat;
text-decoration: underline;
text-underline-offset: .2em;
}
a {
color: white;
text-decoration: none;
}
html { box-sizing: border-box; }
*,*::before,*::after {
box-sizing: inherit;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.