captured sparks

Pure CSS3 Buttons

When you need to produce stunning buttons for use in modern browsers, use Pure CSS3 Buttons.

Place the CSS below in your stylesheet and attach a class of pure to the links you would like to style.

.pure {
	letter-spacing: 1px;
	display: inline-block;
	padding: 0.5em 3em;
	background-color: rgb(0,62,155);
	color: rgb(238,238,238);
	text-decoration: none;
	font-weight: bold;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.25)),color-stop(1, rgba(255,255,255,0.05))); /* Saf4+, Chrome */
	text-shadow: rgb(68,68,68) 0 -1px 1px;
	box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
	-webkit-box-shadow: 1px 1px 3px rgba(136,136,136,0.3);
	-moz-box-shadow: 1px 1px 3px rgba(68,68,68,0.3);
	border-bottom: 1px solid rgba(0,0,0,0.25);
}

.pure:hover {
	background-color: rgb(0,62,215);
	text-shadow: rgb(238,238,238) 0 0 2px;
	-webkit-transition: all 0.3s linear;
}

.pure:active {
	background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05), rgba(255,255,255,0.25)); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0.05)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

To produce the colour you need for your buttons, change this one line of CSS in the .pure class and the hover state:

background-color: rgb(0,62,155);

The buttons use advanced styling that works in Safari 4, Chrome and Firefox 3.6. WebKit browsers also enjoy transition effects for the hover state.