Sexy CSS buttons

dabblet.css

/**
 * Sexy CSS buttons
 */

/* additional styles */
hr {
	
	border: none;
	border-bottom: 2px solid #fafafa;
	border-top: 1px solid #dadada;
	margin: 20px 0;
}

/* First style */
.btn1 {
	background: rgb(255, 255, 255);
	border: 1px solid rgb(174, 174, 174);
	border-radius: 4px;
	box-shadow: inset 0 0 7px rgb(236, 236, 236), 0 1px 1px rgb(232, 232, 232);
	color: rgb(109, 111, 118); 
	cursor: pointer;
	font-size: 10px;
	height: 24px;
	line-height: 23px;
	padding: 0 8px;
	transition: color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.btn1.hover,
.btn1:hover {
	color: rgb(72, 156, 206);
	border-color: rgb(92, 176, 226);
	box-shadow: inset 0 0 7px rgb(224, 239, 249), 0 1px 1px rgb(163, 205, 229);
}

.btn1.inactive {
	opacity: 0.7;
}
/* Second style */

.btn2 {
	background: rgb(255, 255, 255);
	border: 1px solid rgb(174, 174, 174);
	border-radius: 4px;
	box-shadow: inset 0 0 7px rgb(236, 236, 236), 0 1px 1px rgb(232, 232, 232);
	color: rgb(109, 111, 118); 
	cursor: pointer;
	font-size: 10px;
	height: 24px;
	line-height: 23px;
	padding: 0 8px;
	transition: color 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

.btn2.hover,
.btn2:hover {
	color: rgb(72, 156, 206);
	border-color: rgb(92, 176, 226);
	box-shadow: inset 0 0 7px rgb(224, 239, 249), 0 1px 1px rgb(163, 205, 229);
}

.btn2.inactive {
	opacity: 0.7;
}

dabblet.html

<button class="btn1">Button</button>
<button class="btn1 hover">:hover</button>
<button class="btn1 inactive">inactive</button>

<hr />

<button class="btn2">Button</button>
<button class="btn2 hover">:hover</button>
<button class="btn2 inactive">inactive</button>

settings.json

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