• Sumo

Hi and here we are again with another pure CSS button that looks as good as an image one. Because it is all CSS, it is very easy to implement. You just have to assign the class to your markup and you are ready to go.

Click here for more buttons

Above is a subtle grey button with a “milky” look and feel. It is embossed but appears pressed when hovered on making it more inviting to click. I borrowed the style from this CSS3 script for SELECT and created a button from it.

Without further ado, the CSS:


.milky-button {
	position: relative;
	text-decoration: none;
	width: 200px;
	height: 36px;
	line-height: 36px;
    padding: 0 20px;
	margin: 0 0 2px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 4px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 4px 0 #ccc, 0 -1px #fff inset;
    background: #f0f0f0;
    color: #888;
	display: inline-block;
	vertical-align: middle;
	text-shadow: 0px 1px 0 #fff;
    cursor: pointer;
}
.milky-button:hover {
	margin: 2px 0 0 0;
    -webkit-box-shadow: 0 2px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 2px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 2px 0 #ccc, 0 -1px #fff inset;
	text-shadow: 0px -1px 0 #fff;
    background: #eee;
	color: #666;
}

Another tip: Since some styles here are not supported by older browsers (particularly that of Internet Explorer), I suggest that you use scripts like CSS3 PIE to make it compatible.

For more CSS button styles, just click the button above!