<input id="toggle-heart" type="checkbox"/>
<label for="toggle-heart">❤</label>
View Compiled
$bubble-d: 4.5rem; // bubble diameter
$bubble-r: .5*$bubble-d; // bubble-radius

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

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);
		
		&:before, &:after {
			animation: inherit;
			animation-timing-function: cubic-bezier(.21, .61, .35, 1);
		}
		
		&:before {
			will-change: transform, border-width, border-color;
			animation-name: bubble;
		}
	}
}

[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 {
		box-sizing: border-box;
		margin: -$bubble-r;
		border: solid $bubble-r #e2264d;
		width: $bubble-d; height: $bubble-d;
		transform: scale(0);
	}
}

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

@keyframes bubble {
	15% { @include bubble($bubble-r); }
	30%, 100% { @include bubble(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.