<label class="heart" aria-label="like">
	<input type="checkbox"/>
	<!-- We should use html entities for Icons thank you -->
	<span class="ico">&#x2764;</span>
</label>
<label class="heart" aria-label="like">
	<input type="checkbox"/>
	<!-- We should use html entities for Icons thank you -->
	<span class="ico">&#x2764;</span>
</label>
<label class="heart" aria-label="like">
	<input type="checkbox"/>
	<!-- We should use html entities for Icons thank you -->
	<span class="ico">&#x2764;</span>
</label>
<label class="heart" aria-label="like">
	<input type="checkbox"/>
	<!-- We should use html entities for Icons thank you -->
	<span class="ico">&#x2764;</span>
</label>
$bubble-d: 5rem; // bubble diameter
$bubble-r: .5*$bubble-d; // bubble-radius
$sparkle-d: .5rem;
$sparkle-r: .5*$sparkle-d;
$outline: rgba(255,255,255,0); // outline off

@mixin sparkles($k) {
	$shadow-list: ();
	$n-groups: 7;
	$group-base-angle: 360deg/$n-groups;
	$group-distr-r: (1 + $k*.25)*$bubble-r;
	$n-sparkles: 2;
	$sparkle-base-angle: 360deg/$n-sparkles;
	$sparkle-off-angle: -120deg; // offset angle from radius
	$spread-r: -$k*$sparkle-r;
	
	@for $i from 0 to $n-groups {
		$group-curr-angle: $i*$group-base-angle - 90deg;
		$xg: $group-distr-r*cos($group-curr-angle);
		$yg: $group-distr-r*sin($group-curr-angle);
		
		@for $j from 0 to $n-sparkles {
			$sparkle-curr-angle: $group-curr-angle + 
				$sparkle-off-angle + $j*$sparkle-base-angle;
			$xs: $xg + $sparkle-d*cos($sparkle-curr-angle);
			$ys: $yg + $sparkle-d*sin($sparkle-curr-angle);
			
			$shadow-list: $shadow-list, $xs $ys 0 $spread-r 
				hsl(($i + $j)*$group-base-angle, 100%, 75%);
		}
	}
	
	box-shadow: $shadow-list;
}

@mixin bubble($ext) {
	transform: scale(1);
	border-color: #cc8ef5;
	border-width: $ext;
}

body {
	display: flex;
	justify-content: center;
	margin: 0;
	height: 100vh;
	background: linear-gradient(135deg, 
		#121721, #000);
	font: 1em verdana, sans-serif;
}

.heart {
	align-self: center;
	position: relative;
	font-size: 2em;
	user-select: none;
	cursor: pointer;
	
	.ico {
		filter: grayscale(1);
		color: #888;

		&:before, &:after {
			position: absolute;
			z-index: -1;
			top: 50%; left: 50%;
			border-radius: 50%;
			content: '';
		}

		&:before {
			box-sizing: border-box;
			margin: -$bubble-r;
			border: solid $bubble-r #e2264d;
			width: $bubble-d; height: $bubble-d;
			transform: scale(0);
		}

		&:after {
			margin: -$sparkle-r;
			width: $sparkle-d; height: $sparkle-d;
			@include sparkles(1);
		}
	}
	
	& > input[type="checkbox"] {
		position: absolute;
		left: -100vw;

		&:checked + .ico {
			color: #e2264d;
			filter: none;
			will-change: font-size;
			animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);

			&:before, &:after {
				animation: inherit;
				animation-timing-function: ease-out;
			}

			&:before {
				will-change: transform, border-width, border-color;
				animation-name: bubble;
			}

			&:after {
				will-change: opacity, box-shadow;
				animation-name: sparkles;
			}
		}
		
		&:focus + .ico {
			text-shadow: 0 0 3px $outline, 
				0 1px 1px $outline, 0 -1px 1px $outline, 
				1px 0 1px $outline, -1px 0 1px $outline;
		}
	}
}

@keyframes heart {
	0%, 17.5% { font-size: 0; }
}

@keyframes bubble {
	15% { @include bubble($bubble-r); }
	30%, 100% { @include bubble(0); }
}

@keyframes sparkles {
	0%, 20% { opacity: 0; }
	25% {
		opacity: 1;
		@include sparkles(0);
	}
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.