If Josh Ran The World

It would be nice
19
Sep
2011

OS X 10.8 Buttons Pure CSS3

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.

15
May
2011

Raining in my condo