Buttons v. 2

dabblet.css

/**
 * Buttons v. 2
 */

body {
	background: rgb(234, 234, 234);
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEXn5+fo6Ojp6enk5OTy8vLx8fHr6+vl5eXv7+/j4+Pu7u7w8PDm5ubs7Ozq6urt7e3i4uLz8/PoUfk0AAAEvElEQVR4XpWWW6pgNwwE9X7L9tn/ZgP5yBBIhrk7kERVtyAYq1mDQppBgWBYHpjooYCv9jvjdUCVmL+pPUCEg+bfs7zC6Xkqbl28PQuKtMOS/W325e6NBGAGp/W4iF9RF6uBCR4x7IGkc/SWyOd6o4EvAviDatBbTd18ga97CiI8lQt+roBQE39bsObYBGBnIOdYh6DDfn4TaoDZAigVWsbz4CbX0UFKmINoFliorsKb/s37ZPkGwrEEjvMQ4X7T72YmQDyU3Wfgl9joYI2J2ErhQZKQpL6HobarN6YSPpHnSVpRx0FuUlbd+K677frf04A+dxH75oUS1NWE07f56zi2387Vjx/jHJpvsAfPh/f2mE5BJXh+RpcEZQJolskTCtrH0eUl4fGe8ezDKA2M0Op0Y72ONFwojnvrdsYK6Rx+kJNxYVVylOc1oOcNo+EXijdJT/uVR50mR3YYuJBiygq4F67D+d5WMVbN8fedW2J2BZkq6RtUGN+IsD5jBhcX8jy3HN3cKwLSmljVWXSU5I7XVWkDjMJxDlmA5c+a4aadnLW0g3WOnwjiszEe9gh0p1BURhEMsHN40t5s6D3Pj/EAN908G9WpmsYn3IeaxeBDNoaX5HlI32fHL0wDoHHMWyX5dPlAdG7kXIBfvKVODBOPcManbcoFDybKVHt6nqshLYjjHIaawg8CbPhQaNmFDM4EQ8+qfXQ89s5DBeRmvcPkCFXuSggTg5V9YylPzWb4XMhKBPwu2DyBk/bwI8lT9xW9yzHHPoGJRNtBNsm8UqOb8APqzyouF4Bq0L11V5La4u57H9zWCuUAMDhsdrv6TdT6FuAHw8dU/DIV3YdYojr/TwW0Ijn9hAFQT0JKO2L3Ll+DrCFJaKLSGbxaezfj7MdaSAr0TnyCIIKbq7BG/npTgMqE28sB90s9QtdnKOGJvZFspE3LgdOCkIi2QiSuk30Plp08kTtHAn7d+wmtp3qesNQW5SN+DXs/OOfXzvCdVF0TqiIA2GCc6E7Is0lzDe5FsqKg+S4gPYCFU1TzpaSBepyAb8ARxT2kt98t4Ve6qE6iCOFSmCp1jleQs5QQwJEutcFzOcUrb+csyGsvkJUnAPVej4X4F8QGERc8Pr6qlKN13kKi1NUECAzpRlZ4afQSg2x9rsb1dg1ofyqRjZxnojbh6OXbMEwZcZB8zR9mE+AtBtI1E8OqtC+h8CNQ613V8JEvJ7ZpnWBQghBkdt2U05+W6umFlJ/FcaXDgf8MRPbARvjGjJgPCb76B0boJYK+xAIzpHg6/cb045g+wJmXhR9fBkMnnweoF88Qy3lU39PDD+rT1QfhMdGMJ5n0fKyLhKDwfmwyAPsuqhmKfin3cgH+vtmxn6MgP3t1jl+QChr2bxEWjir0jBcYhURPksO/hNMSL9R024AwODowZjtPT9QgDckBO5qIvG1lcRFoLQJQk0eMSbCl+6ASInvhOkItHfy2972w6/LsuQUlOD43KRR1zUNThwy/4AZ3zlZhR3FfvnpbArBTovNCkatyG0dr+r3kH1xkc8tuPdVPWYFf9YrFWWZjarbLKpF+9PCmQno47QnqJ0io9hVT/05vqLf2isDlQMSfPEF/AXZNTAEejRwFAAAAAElFTkSuQmCC);
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.button {
	display: block;
	cursor: pointer;
	
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%);
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
	
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	
	font-size: 16px;
	font-weight: bold;
	color: #F6F7E4;

	text-align: center;
	padding: 5px 8px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;

	border: 1px solid #888;
	text-decoration: none;
}

.button:active {
	background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%);
	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.25) 100%);
	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.0) 0%,rgba(0, 0, 0, 0.25) 100%);
}

.success {
	background-color: rgb(170, 196, 54);
	padding: 10px 23px;
	font-size: 18px

}

.error {
	background-color: rgb(229, 105, 79);
	font-size: 12px

}
.buttons a {
	float: left;
	margin-left: 10px;
}

dabblet.html

<div class="buttons">
	<a href="#" class="button error">Delete</a>
	<a href="#" class="button success">Cancel</a>
</div>

settings.json

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