Create new Google UI buttons using CSS


August 6, 2011CSSNo comments

Tech giant Google’s new web interface is all about simpler and neat UI across all Google products.This new interface is widley rolled out to maximum of google products including google plus,gmail,blogger etc.

The search engine which is core of Google also moved to a new web interface with improved nav bar and UI buttons.All these new buttons are same and tailor made to appear right on all kinds of devices and browsers.

google new ui buttons

CSS3 UI buttons

Made using CSS3 with gradients to enhance the look and feel

a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;


Demo new UI buttons

Leave a Reply