orioltf
1/11/2012 - 7:34 AM

#CSS #CSS3: Styling Button Links With CSS3

#CSS #CSS3: Styling Button Links With CSS3

settings.json
content_copyfile_download
{"view":"split-vertical","prefixfree":"1","page":"css"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<br />
<br />
<br />
<a class="button-link" href="call/to/action.html">Click me!</a>
dabblet.css
content_copyfile_download
/**
 * Styling Button Links With CSS3
 * Credit: http://www.usabilitypost.com/2012/01/10/pressed-button-state-with-css3/
 */
 /* Step 1: the button */
.button-link {
	padding: 10px 15px;
	background: #4479BA;
	color: #FFF;
	text-decoration: none;
	/* Kind of boring until here... */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #20538D;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	/* it’s starting to look a lot better */
}
/* Step 2: the hover state */
.button-link:hover {
	background: #356094;
	border: solid 1px #2A4E77;
	text-decoration: none;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
/* Step 3: the active state */
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -o-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
}