Ref. gradient http://css-tricks.com/css3-gradients/

dabblet.css

/* Ref. gradient http://css-tricks.com/css3-gradients/ */
input {
	border: 0 none;
	padding: 5px 15px 6px;
	font: bold 12px verdana, arial;
	border-radius: 5px;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	cursor: pointer; }

input[type=reset] {
	border: 1px solid rgba(225,225,225,1);
	background: linear-gradient(rgba(250,250,250,1) 0%, rgba(225,225,225,1) 5%, rgba(200,200,200,1) 50%, rgba(175,175,175,1) 95%, rgba(125,125,125,1) 100%);
	box-shadow: inset 0 0 10px rgba(225,225,225,0.5);
	-webkit-transition-duration: 500ms;
	-webkit-transition-property: border, background; }
	
	input[type=reset]:hover { border: 1px solid rgba(160,160,160,1); }
		
	input[type=reset]:active {
		border: 1px solid rgba(100,100,100,1);
		background: linear-gradient(rgba(200,200,200,1) 0%, rgba(175,175,175,1) 5%, rgba(175,175,175,1) 50%, rgba(150,150,150,1) 95%, rgba(75,75,75,1) 100%); }

input[type=submit] {
	border: 1px solid rgba(250,200,0,1);
	background: linear-gradient(rgba(255,255,0,1) 0%, rgba(250,200,0,1) 5%, rgba(255,155,0,1) 50%, rgba(255,155,0,1) 95%, rgba(200,57,0,1) 100%);
	box-shadow: inset 0 0 10px rgba(250,200,0,0.5);
	-webkit-transition-duration: 500ms;
	-webkit-transition-property: border, background; }
	
	input[type=submit]:hover { border: 1px solid rgba(250,130,0,1); }
	
	input[type=submit]:active {
		border: 1px solid rgba(250,75,0,1);
		background: linear-gradient(rgba(255,175,0,1) 0%, rgba(250,125,0,1) 5%, rgba(255,125,0,1) 50%, rgba(255,125,0,1) 95%, rgba(200,25,0,1) 100%); }

dabblet.html

<input type="submit" value="Enviar">
<input type="reset" value="Borrar">

settings.json

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