Posted By

bullzito on 10/16/10

Tagged

Versions (?)

Last Edited at 10/16/10 03:33pm

Statistics

Viewed 458 times

Favorited by 3 user(s)

Related snippets

CSS3 Buttons (Call to Action)

/ Published in: CSS

CSS3 Button\\r\\n<p>This uses no images and has fall-back colors for IE browsers.</p>

Highlighted TextExpand

/* CSS3 BUTTON 
----------------------------------------------------- */

.button {
	border:1px solid #1D4253;
	color:#FFFFFF;
	text-shadow:0 -1px 0 #004e68;
	font-size:12px;
	display:inline-block;
	margin:8px 0;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	background-color:#007197;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,93,124)),
		color-stop(1, rgb(0,136,181))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,93,124) 0%,
		rgb(0,136,181) 100%
	);
	-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
	box-shadow:0 2px 5px rgba(0, 0, 0, 0.55);
}

.button:hover {
	background-color:#0081ab;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,116,154)),
		color-stop(1, rgb(0,165,198))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,116,154) 0%,
		rgb(0,165,198) 100%
	);
	text-decoration:none;
}

.button:active {
	background-color:#006486;
	background-image:
	-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(0,133,166)),
		color-stop(1, rgb(0,83,122))
	);
	background-image:
	-moz-linear-gradient(
		center bottom,
		rgb(0,133,166) 0%,
		rgb(0,83,122) 100%
	);
	-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
	box-shadow:0 0 2px rgba(0, 0, 0, 0.75);
}

.button span {
	padding:8px 20px;
	border-top:1px solid #00B8D3;
	display:block;
	font-weight:bold;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;	
}

.button span:active { border-top-color:transparent; }

/* HTML MARK-UP
----------------------------------------------------- */

<a href="#" class="button"><span>CSS3 Button - No Images</span></a>

URL: http://marioluevanos.com/playground/CSS3%20Button/

Report this snippet Tweet