<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>

$bubble-d: 4.5rem; // bubble diameter
$bubble-r: .5*$bubble-d; // bubble-radius

body {
	display: flex;
	justify-content: center;
	margin: 0;
	height: 100vh;
}

[id='toggle-heart'] {
  position: absolute;
  left: -100vw;
	
	&:checked + label {
		color: #e2264d;
		will-change: font-size;
		animation: heart 1s cubic-bezier(.17, .89, .32, 1.49);
	}
}

[for='toggle-heart'] {
	align-self: center;
	position: relative;
	color: #aab8c2;
	font-size: 2em;
	cursor: pointer;
	
	&:before, &:after {
		position: absolute;
		z-index: -1;
		top: 50%; left: 50%;
		border-radius: 50%;
		content: '';
	}
	
	&:before {
		margin: -$bubble-r;
		width: $bubble-d; height: $bubble-d;
		background: gold;
	}
}

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