Untitled

dabblet.css

div {
	border-radius: 50px;
	color: #f0f;
	font-size: 128px;
	text-align: center;
	margin: 0 auto;
	padding: 0 0 24px;
	position: relative;
	width: 200px;
}

div:hover {
	background: #f0f;
	color: #fff;
	cursor: default;
}

div:after {
	content: attr(data-day);
	background: #f0f;
	border-radius: 50%;
	color: #fff;
	display: block;
	font-size: 20px;
	line-height: 40px;
	height: 40px;
	width: 40px;
	
	position: absolute;
	bottom: 48px;
	left: 30px;
}

div:hover:after {
	background-color: #fff;
	color: #f0f;
}

dabblet.html

<div data-day="24">⚗</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}