- 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.