Buttons

Button

A standard button

Follow
<div class="wojo button">
  Follow
</div>
Animated

A button can animate to show hidden content

Next
Sign-up for a Pro account
<div class="wojo animated button">
  <div class="visible content">Next</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>
<div class="wojo vertical animated button">
  <div class="hidden content">Shop</div>
  <div class="visible content">
    <i class="cart icon"></i>
  </div>
</div>
<div class="wojo animated fade button">
  <div class="visible content">Sign-up for a Pro account</div>
  <div class="hidden content">
    $12.99 a month
  </div>
</div>
Icon

A button can have only an icon

Labeled Icon

A button can have an icon and a label

Pause
Next 
<div class="wojo icon button">
  <i class="cloud icon"></i>
</div>
<div class="wojo labeled icon button">
  <i class="pause icon"></i>
  Pause
</div>
<div class="wojo right labeled icon button">
  <i class="right arrow icon"></i>
  Next
</div>
Button Groups

Buttons can exist together as a group

One
Two
Three
Grouped Icons

Button groups can show groups of icons

<div class="wojo buttons">
  <div class="wojo button">One</div>
  <div class="wojo button">Two</div>
  <div class="wojo button">Three</div>
</div>
<div class="wojo icon buttons">
  <div class="wojo button"><i class="align left icon"></i></div>
  <div class="wojo button"><i class="align center icon"></i></div>
  <div class="wojo button"><i class="align right icon"></i></div>
  <div class="wojo button"><i class="align justify icon"></i></div>
</div>
<div class="wojo icon buttons">
  <div class="wojo button"><i class="bold icon"></i></div>
  <div class="wojo button"><i class="underline icon"></i></div>
  <div class="wojo button"><i class="text width icon"></i></div>
</div>
Conditionals

Button groups can be separated by conditionals

Cancel
Save
<div class="wojo buttons">
  <div class="wojo button">Cancel</div>
  <div class="or"></div>
  <div class="wojo positive button">Save</div>
</div>
Variations

A button can be formatted to link to a social website

Google Plus
VK
LinkedIn
Instagram
YouTube 
<div class="wojo facebook button">
  <i class="facebook icon"></i>
  Facebook
</div>
<div class="wojo twitter button">
  <i class="twitter icon"></i>
  Twitter
</div>
<div class="wojo google plus button">
  <i class="google plus icon"></i>
  Google Plus
</div>
<div class="wojo vk button">
  <i class="vk icon"></i>
  VK
</div>
<div class="wojo linkedin button">
  <i class="linkedin icon"></i>
  LinkedIn
</div>
<div class="wojo instagram button">
  <i class="instagram icon"></i>
  Instagram
</div>
<div class="wojo youtube button">
  <i class="youtube icon"></i>
  YouTube
</div>
Sizes

A button can have different sizes

Mini
Tiny
Small
Medium
Large
Big
Huge
Massive 
<div class="mini wojo button"> Mini </div>
<div class="tiny wojo button"> Tiny </div>
<div class="small wojo button"> Small </div>
<div class="medium wojo button"> Medium </div>
<div class="large wojo button"> Large </div>
<div class="big wojo button"> Big </div>
<div class="huge wojo button"> Huge </div>
<div class="massive wojo button"> Massive </div>
Colors

A button can have different colors

Black Button Positive Button Negative Button
Info Button Purple Button Teal Button
Warning Button 
<a class="wojo black button">Black Button</a> 
<a class="wojo positive button">Green Button</a> 
<a class="wojo negative button">Red Button</a> 
<a class="wojo info button">Blue Button</a> 
<a class="wojo purple button">Purple Button</a> 
<a class="wojo teal button">Teal Button</a> 
<a class="wojo warning button">Orange Button</a>
Circular

A button can be circular

Rounded
<div class="circular wojo button">Rounded</div>
<div class="circular wojo icon button"> <i class="icon settings"></i></div>
Fluid

Groups can be divided evenly to fit parent

One
Two
Three
<div class="3 fluid wojo buttons">
  <div class="wojo button">One</div>
  <div class="wojo button">Two</div>
  <div class="wojo button">Three</div>
</div>
One
Two
Three
Four
Five
<div class="five fluid wojo buttons">
  <div class="wojo button">One</div>
  <div class="wojo button">Two</div>
  <div class="wojo button">Three</div>
  <div class="wojo button">Four</div>
  <div class="wojo button">Five</div>
</div>
<div class="12 fluid wojo icon buttons">
  <div class="wojo button"><i class="star icon"></i></div>
  <div class="wojo button"><i class="tags icon"></i></div>
  <div class="wojo button"><i class="tasks icon"></i></div>
  <div class="wojo button"><i class="terminal icon"></i></div>
  <div class="wojo button"><i class="text file icon"></i></div>
  <div class="wojo button"><i class="text file outline icon"></i></div>
  <div class="wojo button"><i class="time icon"></i></div>
  <div class="wojo button"><i class="trash icon"></i></div>
  <div class="wojo button"><i class="url icon"></i></div>
  <div class="wojo button"><i class="user icon"></i></div>
  <div class="wojo button"><i class="users icon"></i></div>
  <div class="wojo button"><i class="video icon"></i></div>
</div>