CSS3 Gmail Buttons

• Click me

  <a href="#" class="bttn">Click me<a>

• Click me

  <a href="#" class="bttn emphasis">Click me<a>

• Click me

  <a href="#" class="bttn red">Click me<a>

• Click me

  <a href="#" class="bttn blue">Click me<a>

• Click me

  <a href="#" class="bttn yellow">Click me<a>

• Icon

  <a href="#" class="bttn red icon">Icon<a>

• Icon

  <a href="#" class="bttn blue icon">Icon<a>

• Icon

  <a href="#" class="bttn yellow icon">Icon<a>

• Add

  <a href="#" class="bttn icon add">Add<a>

• Apple

  <a href="#" class="bttn icon apple">Apple<a>

• Approve

  <a href="#" class="bttn icon approve">Approve<a>

• Attachment 1

  <a href="#" class="bttn icon attachment-1">Attachment 1<a>

• Attachment 2

  <a href="#" class="bttn icon attachment-2">Attachment 2<a>

• Bookmark

  <a href="#" class="bttn icon bookmark">Bookmark<a>

• Calendar

  <a href="#" class="bttn icon calendar">Calendar<a>

• Cart

  <a href="#" class="bttn icon cart">Cart<a>

• Clipboard

  <a href="#" class="bttn icon clipboard">Clipboard<a>

• Close

  <a href="#" class="bttn icon close">Close<a>

• Comment

  <a href="#" class="bttn icon comment">Comment<a>

• Delete

  <a href="#" class="bttn icon delete">Delete<a>

• Download

  <a href="#" class="bttn icon download">Download<a>

• Dropdown

  <a href="#" class="bttn icon dropdown">Dropdown<a>

• Edit

  <a href="#" class="bttn icon edit">Edit<a>

• Favourite

  <a href="#" class="bttn icon favourite">Favourite<a>

• Folder

  <a href="#" class="bttn icon folder">Folder<a>

• Folder Plus

  <a href="#" class="bttn icon folder-plus">Folder Plus<a>

• Folder Minus

  <a href="#" class="bttn icon folder-minus">Folder Minus<a>

• Fork

  <a href="#" class="bttn icon fork">Fork<a>

• Home

  <a href="#" class="bttn icon home">Home<a>

• Like

  <a href="#" class="bttn icon like">Like<a>

• Link

  <a href="#" class="bttn icon link">Link<a>

• List

  <a href="#" class="bttn icon list">List<a>

• Lock

  <a href="#" class="bttn icon lock">Lock<a>

• Mail

  <a href="#" class="bttn icon mail">Mail<a>

• Maximise

  <a href="#" class="bttn icon maximise">Maximise<a>

• Minimise

  <a href="#" class="bttn icon minimise">Minimise<a>

• Move

  <a href="#" class="bttn icon move">Move<a>

• New Window

  <a href="#" class="bttn icon new-window">New Window<a>

• Pin

  <a href="#" class="bttn icon pin">Pin<a>

• Print

  <a href="#" class="bttn icon print">Print<a>

• Profile

  <a href="#" class="bttn icon profile">Profile<a>

• Refresh

  <a href="#" class="bttn icon refresh">Refresh<a>

• Remove

  <a href="#" class="bttn icon remove">Remove<a>

• RSS

  <a href="#" class="bttn icon rss">RSS<a>

• Save

  <a href="#" class="bttn icon save">Save<a>

• Search

  <a href="#" class="bttn icon search">Search<a>

• Settings

  <a href="#" class="bttn icon settings">Settings<a>

• Stats

  <a href="#" class="bttn icon stats">Stats<a>

• Sync

  <a href="#" class="bttn icon sync">Sync<a>

• Tag

  <a href="#" class="bttn icon tag">Tag<a>

• Tools

  <a href="#" class="bttn icon tools">Tools<a>

• Unlock

  <a href="#" class="bttn icon unlock">Unlock<a>

• Upload

  <a href="#" class="bttn icon upload">Upload<a>

• View

  <a href="#" class="bttn icon view">View<a>

• Volume Mute

  <a href="#" class="bttn icon vol-mute">Vol-mute<a>

• Volume Low

  <a href="#" class="bttn icon vol-low">Vol-low<a>

• Volume Mid

  <a href="#" class="bttn mid vol-mute">Vol-mid<a>

• Volume High

  <a href="#" class="bttn icon vol-high">Volume High<a>

• Click me
• Click me
• Click me
• Click me

<ul class="grouped">
  <li><a href="#" class="bttn">Click me<a></li>
  <li><a href="#" class="bttn">Click me<a></li>
  <li><a href="#" class="bttn">Click me<a></li>
  <li><a href="#" class="bttn">Click me<a></li>
</ul>

<div class="grouped">
  <a href="#" class="bttn">Click me<a>
  <a href="#" class="bttn">Click me<a>
  <a href="#" class="bttn">Click me<a>
  <a href="#" class="bttn">Click me<a>
</div>

<div class="grouped">
  <a href="#" class="bttn prev">Previous<a>
  <a href="#" class="bttn next">Next<a>
</div>