Boton y Flecha con CSS3

dabblet.css

/**
 * Boton y Flecha con CSS3
 */
html {min-height:100%;}
body {background:#ccc; background: linear-gradient(90deg, #ccc, #999); font-family:Tahoma, sans-serif; text-shadow: #000 0 0 5px}
.boton {
	display: block;
	margin: 150px auto;
	width: 190px;
	line-height: 35px;
	text-align: center;
	padding: 10px;
	background: #666;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 18px;
	text-decoration: none;
	color: #fff;
	position: relative;
}
	.boton:before {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		background: #666;
		top: -10px;
		left: 10px;
		transform: rotateZ(45deg);
	}
		.boton:hover,
		.boton:hover:before {
			background: #333;
		}
		
	

dabblet.html

<a href="#" class="boton">Texto del boton</a>

settings.json

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