Post image for Create Google Plus-Style Button using CSS3

Create Google Plus-Style Button using CSS3

by Hyder

in PHP

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

    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. Creating a Fancy Search Feature with PHP,Mysql and Jquery
    3. Facebook and Google Plus style of introducing new features using jQuery
    After Post

    { 9 comments… read them below or add one }

    Qori November 25, 2011 at 7:19 am

    how to add link to this button??

    Reply

    qc December 31, 2011 at 6:32 pm

    Great example, but missing the last enhancement for the :hover/:active that creates a inside white box. (At least in GMAIL)

    Reply

    IMAC March 28, 2012 at 11:00 pm

    Man, you are great!! :D
    Really, this page is awesome! I am gonna follow you at twitter.

    I also try to apply some of the techniques this kind of pages does, i think its a good way to learn and to do things beautiful.

    Thanks!

    Reply

    anu April 3, 2012 at 11:40 am

    Live User availability code are not working in Internet explorer

    Reply

    Comprar y vender April 20, 2012 at 11:46 am

    Good exaplme!! thanks from argentina

    Reply

    panuwat April 22, 2012 at 7:28 am

    It’s very look and feel gui.Thank so much from thailand.

    Reply

    panuwat April 22, 2012 at 7:29 am

    You are cool programmer.i like you.

    Reply

    prasad October 10, 2012 at 11:57 am

    nice article, this google button with jquery or javascript effect will enhance this article.

    Reply

    Sreekanth August 23, 2013 at 3:21 pm

    It doesn’t seem to work well with IE6&7.

    Reply

    Leave a Comment

    Previous post: