CSS3 3D Button

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.