Button

dabblet.css

body{
	
}

/* Button */
.button {
	background-color: hsla(90,40%,50%,1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.7) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(255,255,255,0.4);
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	border-radius: 3px;
	color: rgba(58,128,80,1);
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
	text-align: center;
	letter-spacing: 0.1em;
	
	box-shadow: 0 0 0 10px rgba(0,100,50,0.5), 0 0 0 15px rgba(100,100,50,0.5);
}

.button:hover {
	background-color: #f00;
	color: #333;
}

.transition .button {
	transition: background-color 1s ease-in 0.25s, color 0.5s linear 1s;
}

@keyframes shake {
	from {
		margin-left: 0;
	}
	
	25% {
		margin-left: 10px;
	}
	
	75% {
		margin-left: -10px;
	}
	
	to {
		margin-left: 0;
	}
}

.animation .button:hover {
	animation: shake 0.25s linear 3;
}

dabblet.html

<section class="transition">
	<h2>Transition</h2>
	<a class="button" href="#">Transist me?</a>
</section>


<section class="animation">
	<h2>Animation</h2>
	<a class="button" href="#">Animate me?</a>
</section>

settings.json

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