picnic/src/plugins/button/test.html

A lighweight CSS library with nice defaults and many plugins to kickstart your projects

<!-- Testing the module -->
<h2 id="button">Button types and colors</h2>

<div>
  <button>Button</button>
  <button class="success">Button</button>
  <button class="warning">Button</button>
  <button class="error"  >Button</button>
  <button class="pseudo">Button</button>
  <button disabled>Button</button>
</div>

<div>
  <a class="button">Link</a>
  <a class="button success">Link</a>
  <a class="button warning">Link</a>
  <a class="button error">Link</a>
  <a class="button pseudo">Link</a>
  <a class="button" disabled>Link</a>
</div>

<div>
  <input type="submit" value = "Submit" />
  <input type="submit" class="success" value="Submit" />
  <input type="submit" class="warning" value="Submit" />
  <input type="submit" class="error" value="Submit" />
  <input type="submit" class="pseudo" value="Submit" />
  <input disabled type="submit" value="Submit" />
</div>

<div>
  <label>
    <input type="checkbox" />
    <span class="toggle button">Toggle</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="toggle button success">Toggle</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="toggle button warning">Toggle</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="toggle button error">Toggle</span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="toggle button pseudo">Toggle</span>
  </label>
  <label>
    <input disabled type="checkbox" />
    <span disabled class="toggle button">Toggle</span>
  </label>
</div>