30-09-2011

CSS3 Styling html buttons with CSS3

I just found a nice practical example of ui button styling through CSS3 features such as box-shadow, text-shadow and border-radius.

input[type=submit],
button {
	border: 1px solid #777;
	background-color: #444;
	border-radius: 6px;
	box-shadow: inset 1px 6px 12px #444, inset -1px -10px 5px #333, 1px 2px 1px black;
	-o-box-shadow: inset 1px 6px 12px #444, inset -1px -10px 5px #333, 1px 2px 1px black;
	-webkit-box-shadow: inset 1px 6px 12px #444, inset -1px -10px 5px #333, 1px 2px 1px black;
	-moz-box-shadow: inset 1px 6px 12px #444, inset -1px -10px 5px #333, 1px 2px 1px black;
	color: white;
	text-shadow: 1px 1px 1px black;
	padding: 6px 30px;
}

Source: http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

Comments:

Your comment:

»
sravan 19/10/2011, 1:13 pm
good

 

[x]