Untitled

dabblet.css

body {
	text-align: center;
	margin-top: 100px;
	background: #CCC;
}

button {
	font-size: 128px;
	font-weight: bold;
	border-radius: 36px;
	background: linear-gradient(top, #CCC, #EEE, #DDD);
	border: none;
	width: 200px;
	height: 200px;
	line-height: 200px;
	position: relative;
	box-shadow: 
		rgba(0,0,0,0.15) 3px 0 2px inset,
		rgba(0,0,0,0.15) -3px 0 2px inset,
		rgba(255,255,255,.5) 0 2px 2px inset, 
		rgba(0,0,0,0.5) 0 -2px 2px inset,
		rgba(0,0,0,.9) 0 0 2px 5px,
		#E5E5E5 0 0 1px 60px,
		rgba(255,255,255,0.9) 0 0 200px 60px;
}

button span {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	color: rgba(0,0,0,0.6)
}

button span:after {
	content: "⌘";
	position: absolute;
	top: 2px;
	left: 0;
	right: 0;
	z-index: 3;
	color: rgba(0,0,0,0);
	background: radial-gradient(50% 0%, circle cover, 
		rgba(255,255,255,.6), rgba(255,255,255,0.2) 44%, rgba(255,255,255,0) 45%, rgba(255,255,255,0)), linear-gradient(top, #666, #222);
	-webkit-background-clip: text;
}

button span:before {
	content: "⌘";
	position: absolute;
	top: 4px;
	left: 0;
	right: 0;
	color: #FFF;
	
}

dabblet.html

<button><span>&#8984;</span></button>

settings.json

{"view":"split","prefixfree":"1","page":"css"}