I was messing around with making buttons in CSS and thought I’d share the code I wrote. I discovered that using an inset shadow gives the button a little glow on the top.

Nifty button

Old and feeble browsers will display a button with a flat colour background, no rounded corners or text shadows and no opacity, but it will still work perfectly.

	
button {
	background: #333; /*old browser fallback*/
	background: -moz-linear-gradient(center top, #888, #333);
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333));
	-moz-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset; /*this adds the little glow 	at the top*/
	-webkit-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
	-o-box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
	box-shadow:0px 1px 1px rgba(250, 250, 250, 0.4) inset;
	-moz-border-radius: 0.7em;
	-webkit-border-radius: 0.7em;
	-o-border-radius: 0.7em;
	border-radius: 0.7em;
	border:1px solid #444444;
	opacity:0.8; /*shows some of the background through*/
	text-shadow:1px 1px 0 rgba(250, 250, 250, 0.2);
	padding:1em 2em;
	font-size:1.1em;
	color:#fff;
}

button:hover,
button:focus,
button:active {
	cursor: pointer;
	opacity:1;
	-moz-box-shadow: 0 0 8px #3C72AC; /*adds a glow on hover*/
	-webkit-box-shadow: 0 0 8px #3C72AC;
	-o-box-shadow: 0 0 8px #3C72AC;
	box-shadow: 0 0 8px #3C72AC;
}