After seeing a few of the form and navigation elements from OS X 10.8 I decided to incorporate and recreate them in CSS. Below is the styling for buttons. I also want to build a search input box which will be next.
.button{
background:#ddd;
background:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#c2c2c2));
background-image:-moz-linear-gradient(top, #ddd, #c2c2c2);
border:1px solid #838383;
border-radius:15px;
color:#fff;
display:block;
padding:10px 20px;
text-align:center;
text-decoration:none;
text-shadow:#555 0px 2px 2px;
}
.button:hover{
background:#81acd4;
background:-webkit-gradient(linear, left top, left bottom, from(#81acd4), to(#527ea5));
background-image:-moz-linear-gradient(top, #81acd4, #527ea5);
border:1px solid #005ab1;
}
.button:active{
background:#527ea5;
background:-webkit-gradient(linear, left top, left bottom, from(#527ea5), to(#81acd4));
background-image:-moz-linear-gradient(top, #527ea5, #81acd4);
border:1px solid #005ab1;
}
To see this live in action check out the latest version of gramsby.me with our newly designed home page and site.