How to : CSS3 Google-like Button

Sometimes people think what those giant tech corporates do is complicated and difficult , while I believe they follow a basic simple rule to achieve what they do which is “Back to the Basics”.

Today we are going to find out how easy is it to create a sleek simple button just like those buttons in Gmail and other Google Products.

1- Let’s create a simple button :

    <button>Add New</button>

2- Now it’s time for some simple basic CSS coding, first thing to do is to add a background color with some gradient using CSS3, transparent border to kill those default border style,color for text inside the button and some other basic styling

    button{
        background-color: #d14836;
        background-image: -moz-linear-gradient(center top , #dd4B39, #d14836);
        border: 1px solid transparent;
        color:#fff;
        border-radius: 2px;
        font-size: 22px;
        height: 60px;
        min-width: 200px;
        white-space: nowrap;
    }

3- Then we add the hover state , another slightly different colors for background, a border and a box shadow

    button:hover{
        background-color: #C53727;
        background-image: -moz-linear-gradient(center top , #DD4B39, #C53727);
        border: 1px solid #b0281A;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

It’s very simple, very basic, Nothing complicated. Remember It’s always “Back to the Basics”.