<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>
View Compiled
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;
	color: #aab8c2;
	font-size: 2em;
	cursor: pointer;
}

@keyframes heart {
	0%, 15% { font-size: 0; }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.