Create Google Plus-Style Button using CSS3

• Tweet

• Tweet

With everyone talking about Google Plus recent site kick off, I figured it was the perfect time to try and recreate probably one of the most noticeable element on the new social network. Creating buttons with CSS is one of the most experimented-with web design techniques around. The trend in CSS button design seems to be eliminating the use of images, especially background images, from buttons. This emerging trend is mainly due to the recent breakthrough of CSS3. Buttons have now evolved in web designing, not just their appearance and effects but the way they are designed.

With my latest experimentation with CSS3 properties such gradients, box shadows, transitions etc… The result is this set of Google Style buttons created with CSS 3 (no images used at all).You can view a demo or grab the source code through the links below :

Advantages of  creating buttons with css

There are many advantages to using CSS only ( without the use of image ) buttons for the following reasons :

No images need to be downloaded thus faster page loading .

Buttons expand to fit any length of text and it’s easy to alter the size, colour and effects.

By using CSS, it allows you to create button on the fly with just an anchor link. You only need to declare the appropriate class/id of the button in the stylesheet and assign it to the the anchor link.

How to use

There are 4 types of buttons, you just have to add the appropriate class name to the tag <button> .See example below :

   <div class="buttons">
      <button class="action bluebtn"><span class="label">Save</span></button>
      <button class="action redbtn"><span class="label">Upload</span></button>
      <button class="action greenbtn"><span class="label">Comment</span></button>
      <button class="action"><span class="label">Cancel</span></button>
    </div>

The code above will result in the following buttons :

Google Plus style CSS 3 buttons

Please feel free to use it in your next project .

Related Posts

1. Google Plus Photo stack animation using Jquery and CSS3
2. Facebook and Google Plus style of introducing new features using jQuery
3. How to build a CSS3 drop down menu
4. Google Plus Click Animation effect on Stream Page using Jquery

Tagged as: css 3 buttons, Google Plus, gplus