<button>gold</button>
<button>silver</button>
<button>bronze</button>
<button>titanium</button>
$l: 6.25em;
$bw: .1*$l;
$sh: radial-gradient(
rgba(#787878, .9), rgba(#787878, 0) 70%)
50% bottom / 80% .75*$bw no-repeat border-box;
$hl: inset 0 1px 2px rgba(#fff, .5),
inset 0 -1px 2px rgba(#000, .5);
@import url(https://fonts.googleapis.com/css?family=Satisfy);
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
min-height: 100vh;
background: #aaa;
}
button {
align-self: center;
border: solid $bw transparent;
padding: 3px;
width: $l; height: $l;
border-radius: 1.75*$bw;
font: 2.5em /#{$l - 2*$bw} Satisfy, cursive;
text-shadow:
0 0 1px currentColor,
0 0 2px dimgrey;
cursor: pointer;
&:nth-child(1) {
box-shadow: inset 0 0 0 1px #eedc00, $hl;
background:
conic-gradient(
#edc800, #e3b600, #f3cf00, #ffe800,
#ffe900, #ffeb00, #ffe000, #ebc500,
#e0b100, #f1cc00, #fcdc00, #ffe500,
#fad900, #eec200, #e7b900, #f7d300,
#ffe800, #ffe300, #f5d100, #e6b900,
#e3b600, #f4d000, #ffe400, #ebc600,
#e3b600, #f6d500, #ffe900, #ffe90a,
#edc800) content-box,
linear-gradient(#f6d600, #f6d600)
padding-box, $sh;
}
&:nth-child(2) {
box-shadow: inset 0 0 0 1px #c9c9c9, $hl;
background:
conic-gradient(
#d7d7d7, #c3c3c3, #cccccc, #c6c6c6,
#d3d3d3, #d8d8d8, #d5d5d5, #d8d8d8,
#d3d3d3, #c5c5c5, #c0c0c0, #bfbfbf,
#d0d0d0, #d9d9d9, #d1d1d1, #c5c5c5,
#c8c8c8, #d7d7d7, #d5d5d5, #cdcdcd,
#c4c4c4, #d9d9d9, #cecece, #c5c5c5,
#c5c5c5, #cdcdcd, #d8d8d8, #d9d9d9,
#d7d7d7) content-box,
linear-gradient(#d4d4d4, #d4d4d4)
padding-box, $sh;
}
&:nth-child(3) {
box-shadow: inset 0 0 0 1px #bc7e6b, $hl;
background:
conic-gradient(
#d95641, #b14439, #b2453a, #d25645,
#d56847, #d05441, #b85137, #b2453a,
#c34f40, #df4647, #a94338, #c94943,
#c85442, #a4413c, #d9543a, #d1564e,
#ab4338, #bb4a3c, #dc5843, #b94839,
#aa4237, #c24e42, #ce523f, #ab4338,
#dd5944, #ca4d33, #ab4338, #cb503e,
#d95641) content-box,
linear-gradient(#ad3b36, #ad3b36)
padding-box, $sh;
}
&:nth-child(4) {
box-shadow: inset 0 0 0 1px #c7aca0, $hl;
background:
conic-gradient(
#e6c9bf, #d2b5aa, #cbaea3, #d4b5ab,
#e5c3bd, #d9c0b4, #d9bcb1, #c5a399,
#e3c6bc, #e7cac0, #dec0b5, #d3b6ab,
#cfada1, #d4b6ac, #e2c6c0, #e2c6c0,
#d2b1a6, #d2b1a6, #d1b4a9, #e1c4ba,
#e5c9be, #dec1b6, #d3b6ab, #ceb0a6,
#cfada3, #d2b5aa, #dabdb2, #e5c9be,
#e6c9bf) content-box,
linear-gradient(#e5c9be, #e5c9be)
padding-box, $sh;
}
}
View Compiled
This Pen doesn't use any external CSS resources.