Pure CSS, accessible like button (inspired by Medium)

dabblet.css

/**
 * Pure CSS, accessible like button (inspired by Medium)
 */

.like {
	position: absolute;
	clip: rect(0,0,0,0);
}

.like + label {
	display: inline-block;
	height: 1.5em;
	overflow: hidden;
	user-select: none;
}

@keyframes beat { from {
	transform: scale(.5);
	opacity: 0;
} }
@keyframes beat2 { from {
	transform: scale(.5);
	opacity: 0;
} }

.like + label::before {
	content: "♡";
	display: block;
	width: min-content;
	font: bold 150%/1 Helvetica Neue, Helvetica, sans-serif;
	color: #00ab6b;
	animation: beat .3s cubic-bezier(.1,.7,.6,1.5);
}

.like:checked + label::before {
	content: "♥";
	animation-name: beat2;
}

dabblet.html

<input type="checkbox" id="like" class="like" />
<label for="like">I like this</label>

<input type="checkbox" id="like2" class="like" checked />
<label for="like2">I like this</label>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}