Pretty Pieces

Dark Light

Button Usage

<a href="" class="[size] [color] ('pill', 'square') 'striped' 'bordered' 'pulsating'">My Button</a>

<!------------------------------------------------
Options: can mix and match

size:             mega | large | medium | small | micro
color:            purple | blue | gray | dark-gray | red | green 
(pill|square):    makes buttons more or less round 
striped:          draws diagonal stripes on buttons (default: off)
bordered:         draws outer border on buttons (default: off) 
pulsating:        makes button glow (default: off)
----------------------------------------------------->

Colors

<a href='#' class='large purple button'>Button!</a>
<a href='#' class='large blue button'>Button!</a>
<a href='#' class='large gray button'>Button!</a>
<a href='#' class='large dark-gray button'>Button!</a>
<a href='#' class='large red button'>Button!</a>
<a href='#' class='large green button'>Button!</a>

Sizes

<a href='#' class='mega purple button'>Button!</a>
<a href='#' class='large blue button'>Button!</a>
<a href='#' class='medium gray button'>Button!</a>
<a href='#' class='small dark-gray button'>Button!</a>
<a href='#' class='micro red button'>Button!</a>

Square Buttons

<a href="#" class="large square purple button">Button!</a>
<a href="#" class="large square blue button">Button!</a>
<a href="#" class="large square gray button">Button!</a>
<a href="#" class="large square dark-gray button">Button!</a>
<a href="#" class="large square red button">Button!</a>
<a href="#" class="large square green button">Button!</a>

Pill Buttons

<a href="#" class="large pull purple button">Button!</a>
<a href="#" class="large pull blue button">Button!</a>
<a href="#" class="large pull gray button">Button!</a>
<a href="#" class="large pull dark-gray button">Button!</a>
<a href="#" class="large pull red button">Button!</a>
<a href="#" class="large pull green button">Button!</a>

Striped Buttons

<a href='#' class='large striped purple button'>Button!</a>
<a href='#' class='large striped blue button'>Button!</a>
<a href='#' class='large striped gray button'>Button!</a>
<a href='#' class='large striped dark-gray button'>Button!</a>
<a href='#' class='large striped red button'>Button!</a>
<a href='#' class='large striped green button'>Button!</a>

Bordered Buttons

<a href='#' class='large pill bordered purple button'>Button!</a>
<a href='#' class='large pill bordered blue button'>Button!</a>
<a href='#' class='large pill bordered gray button'>Button!</a>
<a href='#' class='large pill bordered dark-gray button'>Button!</a>
<a href='#' class='large pill bordered red button'>Button!</a>
<a href='#' class='large pill bordered green button'>Button!</a>

Pulsating Buttons

<a href='#' class='large pulsating purple button'>Button!</a>
<a href='#' class='large pulsating blue button'>Button!</a>
<a href='#' class='large pulsating gray button'>Button!</a>
<a href='#' class='large pulsating dark-gray button'>Button!</a>
<a href='#' class='large pulsating red button'>Button!</a>
<a href='#' class='large pulsating green button'>Button!</a>

Inset Button Groups

<div class='inset-button-group purple'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>
<div class='inset-button-group blue'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>
<div class='inset-button-group gray'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>
<div class='inset-button-group dark-gray'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>
<div class='inset-button-group red'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>
<div class='inset-button-group green'>
      <a href='#' class='active'>One</a>
      <a href='#'>Two</a>
      <a href='#'>Three</a>
      <a href='#'>Four</a>
</div>

<div class='gradient-box purple'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box blue'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box gray'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box red'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box green'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

  

<div class='gradient-box striped purple'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box striped blue'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box striped gray'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box striped red'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

<div class='gradient-box striped green'>
  <h3>100</h3>
  <small>Of Something</small>
</div>

  

Flat Notifications

Light Notifications

          
<div class="notification success">
  <a href="#" class="close-link">Close</a>
  <h3>Success!</h3>
  <p>Hurray you were successful in something...finally</p>
</div>

<div class="notification error">
  <a href="#" class="close-link">Close</a>
  <h3>Fail!</h3>
  <p>Boo you failed...typical</p>
</div>

<div class="notification warning">
  <a href="#" class="close-link">Close</a>
  <h3>Warning!</h3>
  <p>Danger Will Robinson...danger</p>
</div>

        
        

                      
<a href="#" class="large purple button" onclick="console.log(document.getElementById('modal').className += ' show');"
>Show Modal</a>
<div id="modal" class="modal ">
  <h2>
    I'm a kickass modal window!
    <small>
      <a href="#" class="cancelModal" onclick="document.getElementById('modal').className = 'modal';">X</a>
    </h2>

    <div class="modal-content">
      <textarea>
        Say something...
      </textarea>
      <div class="controls">
        <a href="#" class="large purple button">Like a boss »</a>
      </div>
    </div>
  </div>

                      
<a href="#" class="large purple button" onclick="console.log(document.getElementById('modal').className += ' show');">Show Modal</a>
<div id="modal" class="modal ">
  <h2>
    I'm a kickass modal window!
    <small>
      <a href="#" class="cancelModal" onclick="document.getElementById('modal').className = 'modal';">X</a>
    </h2>

    <div class="modal-content">
      <textarea>
        Say something...
      </textarea>
      <div class="controls">
        <a href="#" class="large purple button">Like a boss »</a>
      </div>
    </div>
  </div>