anchor.diff:          a.c-Btn regular button
           a.c-Btn.c-Btn--dominant dominant button!
           a.c-Btn regular button
  +      div(style="margin-bottom: 1.5rem;")
  +        a.c-Btn.c-Btn--dominant dominant button hover
  +        a.c-Btn.c-Btn--dominant dominant button active
  +        a.c-Btn.c-Btn--dominant dominant button disabled
         pre.
           &lt;a class="#[u c-Btn]"&gt;regular button&lt;/a&gt;
           &lt;a class="#[u c-Btn]  #[u c-Btn--dominant]"&gt;dominant button!&lt;/a&gt;
  
positive.code:       Ghost buttons can be used on a colored or image background.
        Obviously, choose a background and a button color that won&rsquo;t clash.
      figure.sg-c-Fig
        div(style="margin-bottom: 1.5rem;")
          a.c-Btn.c-Btn--ghost ghost button
        div.o-Highlight.c-Banner(style="margin-bottom:1.5rem; z-index:1;")
          a.c-Btn.c-Btn--ghost ghost button inside a banner
        pre.
          &lt;div&gt;
            &lt;a class="#[u c-Btn]  #[u c-Btn--ghost]"&gt;ghost button&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="c-Banner"&gt;
            &lt;a class="#[u c-Btn]  #[u c-Btn--ghost]"&gt;ghost button inside a banner&lt;/a&gt;
          &lt;/div&gt;
      h3 Flat Buttons
      p Flat button, for making a #[code button] element look like a link.
      figure.sg-c-Fig
        div(style="margin-bottom: 1.5rem;")
          button.c-Btn.c-Btn--flat flat button
        pre.
          &lt;#[u button] class="#[u c-Btn]  #[u c-Btn--flat]"&gt;flat button&lt;/#[u button]&gt;
      h3 Drawer Buttons
      p Drawer buttons for pull-out menu. #[i Close] button is fixed to the top right.
      figure.sg-c-Fig
        button.c-Btn.c-Btn--drawer menu
        button.c-Btn.c-Btn--drawer.c-Btn--drawer--close close
        pre.
          &lt;button class="#[u c-Btn]  #[u c-Btn--drawer]"&gt;menu&lt;/button&gt;
          &lt;button class="#[u c-Btn]  #[u c-Btn--drawer]  #[u c-Btn--drawer--close]"&gt;close&lt;/button&gt;
  
negative.code:         The following button,
          #[a.c-Btn.c-Btn--inline inline button],
          is in line with the text in this paragraph.
        p Lorem ipsum #[a.c-Btn.c-Btn--inline inline button hover] dolor.
        p Lorem ipsum #[a.c-Btn.c-Btn--inline inline button active] dolor.
        p Lorem ipsum #[a.c-Btn.c-Btn--inline inline button disabled] dolor.
        pre.
          &lt;p&gt;The following button,
            &lt;a class="#[u c-Btn]  #[u c-Btn--inline]"&gt;inline button&lt;/a&gt;,
  