- let data = {
- heart: { ico: '❤️', hue: 344 },
- like: { ico: '👍', hue: 247 },
- star: { ico: '⭐', hue: 48 }
- }
- for(let p in data)
- let v = data[p]
button(aria-label=p data-ico=v.ico style=`--hue: ${v.hue}deg`)
View Compiled
$d: 2em;
$t: .3s;
$c: #fcfcfc #d2dae6;
$o: .125*$d;
body {
display: grid;
grid-auto-flow: column;
grid-gap: 8vw;
place-content: center;
margin: 0;
height: 100vh;
background: #ecf0f4
}
button {
--i: var(--light, 0);
--not-i: calc(1 - var(--i));
--j: var(--press, 0);
--not-j: calc(1 - var(--j));
z-index: var(--i);
border: none;
width: $d; height: $d;
border-radius: 15%;
transform: scale(calc(1 - var(--j)*.02));
box-shadow:
calc(var(--not-j)*#{-$o}) calc(var(--not-j)*#{-$o}) #{$o} #{rgba(nth($c, 1), var(--not-j))},
calc(var(--not-j)*#{$o}) calc(var(--not-j)*#{$o}) #{$o} #{rgba(nth($c, 2), var(--not-j))},
inset calc(var(--j)*#{$o}) calc(var(--j)*#{$o}) #{$o} #{rgba(nth($c, 2), var(--j))},
inset calc(var(--j)*#{-$o}) calc(var(--j)*#{-$o}) #{$o} #{rgba(nth($c, 1), var(--j))};
background: #e8e8e8;
font-size: 2.5em;
transition: box-shadow $t, transform $t cubic-bezier(.2,4,1,3);
cursor: pointer;
&::after {
filter:
Contrast(0)
Sepia(var(--i))
Hue-Rotate(calc(var(--hue) - 50deg))
Saturate(5)
Opacity(calc(var(--i) + .21*var(--not-i)))
Drop-Shadow(1px 1px hsla(0, 0%, 100%, var(--not-i)));
transition: filter $t;
content: attr(data-ico)
}
&:focus { outline: none }
&:hover, &:focus { --light: 1 }
&:active { --press: 1 }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.