csswizardry

<p>
  <a href="#0">Button</a>
</p>

<p>
  <button>Button</button>
</p>

<p>
  <input type="submit" value="Button" />

csswizardry

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

@mixin widths($widths-columns, $widths-breakpoint: null) {

  // Loop through the number of columns for each denominator of our fractions.
  @each $widths-denominator in $widths-columns {

csswizardry

<ol class="c-breadcrumb">
  <li class="c-breadcrumb__item"><a href="#0" class="c-breadcrumb__link">Home</a></li>
  <li class="c-breadcrumb__item"><a href="#0" class="c-breadcrumb__link">About</a></li>
  <li class="c-breadcrumb__item"><strong class="c-breadcrumb__current">Products</strong></li>
</ol>

csswizardry

<div class="promo">
  Lorem ipsum dolor sit amet
</div>

csswizardry

<div class="promo">
  Lorem ipsum dolor sit amet
</div>

csswizardry

<div class="header">
  <a href="#0">Link</a>
  <a href="#0" class="btn  foo">Button</a>
</div>

csswizardry

<div class="foo">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>


<div class="bar">
  Lorem ipsum dolor sit amet <br />
  Lorem ipsum dolor sit amet
</div>

csswizardry

<div class="foo">
  <div>
    <div class="foo__bar">Foo</div>
  </div>
</div>

csswizardry

<p>
  
  <label class="c-switch">
    <input type="checkbox" class="c-switch__checkbox" />
    <span class="c-switch__on"></span>
    <span class="c-switch__off"></span>
  </label>

</p>

csswizardry

<h1 class="foo">Lorem ipsum dolor sit amet.</h1>

<p class="error">Lorem ipsum dolor sit amet.</p>