jordangray/dabblet.css

## dabblet.css
/**
 * Glowing circle patches
 */

body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	height: 500px;
}

ul {
	line-height: 200px;
	text-align: center;
	list-style: none;
}

li {
	background: hsla(0,0%,0%,0.02);
	border-radius: 25px;
	box-shadow: 0 0 20px hsla(60, 100%, 50%, 0.5), inset 0 0 1px hsla(0, 0%, 0%, 0.05);
	display: inline-block;
	vertical-align: middle;
	margin: 1em;
	height: 50px;
	line-height: 50px;
	transition: box-shadow 1s, border-radius 1s, height 1s, width 1s, line-height 1s;
	width: 50px;
}

li:hover {
	box-shadow: 0 0 60px hsla(60, 100%, 50%, 1), inset 0 0 4px hsla(0, 0%, 0%, 0.05);
	height: 100px;
	width: 100px;
	border-radius: 50px;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<ul>
	<li>
	<li>
	<li>
	<li>
	<li>
	<li>
	<li>
</ul>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Glowing circle patches
	*/

	body {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	height: 500px;
	}

	ul {
	line-height: 200px;
	text-align: center;
	list-style: none;
	}

	li {
	background: hsla(0,0%,0%,0.02);
	border-radius: 25px;
	box-shadow: 0 0 20px hsla(60, 100%, 50%, 0.5), inset 0 0 1px hsla(0, 0%, 0%, 0.05);
	display: inline-block;
	vertical-align: middle;
	margin: 1em;
	height: 50px;
	line-height: 50px;
	transition: box-shadow 1s, border-radius 1s, height 1s, width 1s, line-height 1s;
	width: 50px;
	}

	li:hover {
	box-shadow: 0 0 60px hsla(60, 100%, 50%, 1), inset 0 0 4px hsla(0, 0%, 0%, 0.05);
	height: 100px;
	width: 100px;
	border-radius: 50px;
	}
	<!-- content to be placed inside <body>…</body> -->

	<ul>
	<li>
	<li>
	<li>
	<li>
	<li>
	<li>
	<li>
	</ul>