CSS3 Google UI Demo

Buttons

The "buttons" can be created by adding class="g-button" to any appropriate <a>, <button>, or <input> element.

<a href="#" class="g-button">Post comment</a>

Colored Buttons

Colored buttons can be created by adding the red, blue, or green class to your button.

<a href="#" class="g-button red">Compose Mail</a>

Compose Mail Search Mail Add Contact

Disabled Buttons

Buttons can also be disabled. The traditional style used in Google Calendar displays the button with a white background and greyed out text. Add the disabled class for this style. If you'd rather keep the grey background but dim it, you can add the disabled2 class.

<a href="#" class="g-button disabled">Today</a>
<a href="#" class="g-button disabled2">Today</a>

Today Today

Smaller Buttons

Default buttons too big? Shrink the text-size of the button with the sm class, or the size of the entire button with the mini class.

<a href="#" class="g-button sm">Month</a>
<a href="#" class="g-button mini">Month</a>

Month Month

Grouped buttons

Groups of buttons can be created by wrapping them in an element given a class of g-button-group.

<div class="g-button-group">
    <a href="#" class="g-button">Archive</a>
    <a href="#" class="g-button">Spam</a>
    <a href="#" class="g-button">Delete</a>
</div>

Archive Spam Delete

Mixed groups

Displaying a mixture of grouped and standalone buttons, as might be seen in a toolbar, can be done by adding another wrapping element with the class g-button-container.

<div class="actions g-button-container">
    <a href="#" class="g-button">Compose New</a>
    
    <div class="g-button-group">
        <a href="#" class="g-button">Archive</a>
        <a href="#" class="g-button">Spam</a>
        <a href="#" class="g-button">Delete</a>
    </div>
                        
    <div class="g-button-group minor-group">
        <a href="#" class="g-button">Move to</a>
        <a href="#" class="g-button">Labels</a>
    </div>

    <a href="#" class="g-button">More</a>
</div>

Compose New

Archive Spam Delete

Move to Labels

Radio Button Groups

Sometimes your button group should act like a series of radio buttons, in which selecting one button deselects the others. Add the toggle-buttons class to your button-group div to accomplish this. To set the currently selected button, use the checked class.

<div class="g-button-group toggle-buttons">
    <a href="#" class="g-button">Day</a>
    <a href="#" class="g-button">Week</a>
    <a href="#" class="g-button checked">Month</a>
    <a href="#" class="g-button">4 Days</a>
    <a href="#" class="g-button">Agenda</a>
</div>

Day Week Month 4 Days Agenda

<div class="g-button-group toggle-buttons">
    <a href="#" class="g-button mini">Day</a>
    <a href="#" class="g-button mini">Week</a>
    <a href="#" class="g-button mini checked">Month</a>
    <a href="#" class="g-button mini">4 Days</a>
    <a href="#" class="g-button mini">Agenda</a>
</div>

Day Week Month 4 Days Agenda

Buttons with icons only

Create a button with only an icon (no text) by adding the no-text class, along with one of the nested icon classes below.


<a href="#" class="g-button no-text"><i class="icon-refresh"></i></a>
<a href="#" class="g-button no-text"><i class="icon-trash icon-white"></i></a>

Or group them together, just like Gmail's paginator.

<div class="g-button-group">
    <a href="#" class="g-button no-text"><i class="icon-chevron-left"></i></a>
    <a href="#" class="g-button no-text"><i class="icon-chevron-right"></i></a>
<div>

You can even mix and match with the disabled state.

<div class="g-button-group">
    <a href="#" class="g-button no-text disabled2"><i class="icon-chevron-left"></i></a>
    <a href="#" class="g-button no-text"><i class="icon-chevron-right"></i></a>
<div>

Mini paginator buttons

The new back/forward buttons inside input elements on Google Flights is pretty slick. You can create those too by adding the xs pg bw and xs pg fw classes.

<div class="g-button-group">
    <a href="#" class="g-button xs-no-text"><i class="xs-icon-bw"></i></a>
    <a href="#" class="g-button xs-no-text"><i class="xs-icon-fw"></i></a>
<div>

Buttons with text and icon

A range of icons can be added (only for links and buttons) by adding a class of icon and any one of the provided icon classes below.

<div class="g-button-group">
    <a href="#" class="g-button"><i class="icon-search"><i>Search</a>
<div>

Class	Example
`.icon-plus`	Add Item
`.icon-arrow-left`	Back
`.icon-arrow-right`	Forward
`.icon-remove`	Remove Item
`.icon-search`	Search
`.icon-cog`	Settings

Button dropdowns

Create buttons with dropdown menus, just like Google Docs, easily. We'll use Twitter Bootstrap's javascript to make it happen.

<div class="g-button-group">
  <a class="g-button dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown Menu <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
      <li><a href="#">Document</a></li>
      <li><a href="#">Presentation</a></li>
      <li><a href="#">Spreadsheet</a></li>
      <li><a href="#">Form</a></li>
  </ul>
</div>

We can even create fancy split-button dropdowns in color with icons and dividers!

<div class="g-button-group">
  <a class="g-button blue"><i class="icon-user icon-white"></i> Add User</a>
  <a class="g-button blue dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
      <li><a href="#"><i class="icon-ok"></i> Action</a></li>
      <li><a href="#"><i class="icon-remove"></i> Another Action</a></li>
      <li><a href="#"><i class="icon-star"></i> Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#"><i class="icon-print"></i> Separated link</a></li>
  </ul>
</div>

Add User

Browser compatibility

Latest version of Chrome, Firefox, and IE8+

License

Public domain: http://unlicense.org/

Acknowledgements

Inspired by Michael Henriksen's CSS3 Buttons, Twitter Bootstrap, and of course, Google. Icons from glyphicons.com.

CSS3 Google Buttons