CSS3 Button For Web Designers: Milky Gray Button

  • SumoMe

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!

About maca

Hello, my name is Karlo Macariola. I once dreamed to be a painter or an animator but when I typed my first line of code I immediately fell in love with programming. Today my passions are with web development and web design though sometimes I still withdraw to my first love which is drawing. DeviantArt | Twitter | Facebook
This entry was posted in Web Development & Design and tagged , . Bookmark the permalink.

2 Responses to CSS3 Button For Web Designers: Milky Gray Button

  1. Erik says:

    It should be noted that this is not the most cross browser friendly approach to this, as it uses CSS3.

    Also, it should be said that :hover and IE don’t play well unless it’s an , which you used the class on.

    • maca says:

      I agree. I suggested a script below the code that can make CSS3 render in older browsers, particularly IE. Thank you for pointing that out.

Leave a Reply to maca Cancel reply

Your email address will not be published. Required fields are marked *