CSS button

dabblet.css

/**
 * CSS button
 * Left: With 2 elements, Right: With 1 element
 */

.button {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	padding: 10px;
	box-sizing: border-box;
	border: 4px solid transparent;
	border-radius: 50%;
	margin: 30px;
	background: linear-gradient(#111, #222), 
	            linear-gradient(black, #333), 
	            linear-gradient(#555, #111) black;
	background-clip: content-box, padding-box, border-box;
	background-origin: content-box, padding-box, border-box;
	box-shadow: 3px 10px 2px 1px rgba(0,0,0,.6);
	color: black;
	text-indent: -9999px;
	overflow: hidden;
}
	
	/* Button holes */
	.button:before {
		content: '';
		position: absolute;
		top: 30px; left: 31px;
		width: 10px; height: 10px;
		border-radius: 50%;
		background: black;
		box-shadow: 0 1px 1px hsla(0,0%,100%,.3),
		            20px 0, 20px 1px 1px hsla(0,0%,100%,.3),
		            0 20px, 0 21px 1px hsla(0,0%,100%,.3),
		            20px 20px, 20px 21px 1px hsla(0,0%,100%,.3);
	}
	
	/* Stiching */
	.button:after,
	.button > span {
		content: '';
		position: absolute;
		top: 42px; left: 33px;
		width: 26px;
		height: 8px;
		border-radius: 4px;
		background: linear-gradient(90deg, rgba(0,0,0,.5), transparent, transparent, rgba(0,0,0,.5)),
		            linear-gradient(0deg, rgba(0,0,0,.1), transparent 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,.1) 80%),
		            hsl(290,30%,20%);
		background-size: 100% 3px;
	}
	
	.button:after {
		transform: rotate(45deg);
		box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	}
	
	.button > span {
		transform: rotate(-45deg);
		box-shadow: -1px 1px 5px black;
	}
	
html {
	background: #302722 url(http://juliancheal.co.uk/images/tweed.jpg);
}

dabblet.html

<a class="button" href="#">
	<span>Random text</span>
</a>

<a class="button" href="#"></a>

dabblet.js

// alert('Hello world!');

settings.json

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