a.button {
display: block;
width: 150px;
height: 42px;
background: #f6f6f6;
border: 1px solid #ccc;
margin-bottom: 20px;
font-family: "Open Sans Condensed";
color: #666;
text-decoration: none;
text-align: center;
line-height: 42px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-text-shadow: 0 1px 0 #fff;
-moz-text-shadow: 0 1px 0 #fff;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 0 -3px 0 rgba(0,0,0,0.1) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.04);
-moz-box-shadow: 0 -3px 0 rgba(0,0,0,0.1) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.04);
box-shadow: 0 -3px 0 rgba(0,0,0,0.1) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.04);
}
a.button:hover {
background: #fff;
border-color: #bbb;
-webkit-box-shadow: 0 -3px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
-moz-box-shadow: 0 -3px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
box-shadow: 0 -3px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
}
a.button:active {
height: 41px;
margin-top: 1px;
border-color: #ccc;
background: #fff;
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
box-shadow: 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 0 #fff inset, 0 3px 0 rgba(0,0,0,0.03);
}
A white 3D button created entirely in CSS, complete with hover and click states.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.