anchor.diff:        vertical rhythm, be sure to contain them in typographical block-level elements
         such as paragraphs or lists.
       p.
  +      Button Components may be in the form of #[code a] elements (links or anchors) or
  +      #[code button] elements.
  +      Keep in mind these button usage guidelines: #[code button]s should
  +      indicate action and be worded actionably. Use an #[code a] instead of a #[code button]
  +      if there is a
  +      meaningful target href or url. Of course, #[code a] elements
  +      as well as #[code button] elements may be styled
  +      to look like Button Components.
  +    p Every Button Component must have styles available for each of the following states:
  +    dl
  +      dt default
  +      dd the button does something or the link goes somewhere, but the user is not interacting with the component
  +      dt hover
  +      dd the user&rsquo;s cursor is hovering over the component
  +      dt active
  +      dd the user is in the process of clicking the component
  +      dt disabled
  +      dd.
  +        the element is a #[code button] with the #[code disabled] attribute or
  +        is an #[code a] with no #[code href] attribute.
  +        the component is inaccessable and/or does nothing, and the user
  +        may not interact with it
  +    p.
  +      Each of these states is demonstrated in the sections below, however
  +      only the code for the default state is shown.
  +    p.
         #[strong Important:] colors will vary by site. Colors shown here are
         #[a(href="visual.html") ASCE 2016].
       h3 Generic Buttons
       p Generic, general purpose buttons.
       figure.sg-c-Fig
         div(style="margin-bottom:1.5rem;"): a.c-Btn generic button
  +      div(style="margin-bottom:1.5rem;")
  +        a.c-Btn generic button hover
  +        a.c-Btn generic button active
  +        a.c-Btn generic button disabled
         pre.
           &lt;a class="#[u c-Btn]"&gt;generic button&lt;/a&gt;
       h3 Highlight Buttons
       p Highlight buttons, for large buttons in highlight block.
       figure.sg-c-Fig
         div(style="margin-bottom:1.5rem;"): a.c-Btn.c-Btn--hilite highlight button
  +      div(style="margin-bottom:1.5rem;")
  +        a.c-Btn.c-Btn--hilite highlight button hover
  +        a.c-Btn.c-Btn--hilite highlight button active
  +        a.c-Btn.c-Btn--hilite highlight button disabled
         pre.
           &lt;a class="#[u c-Btn]  #[u c-Btn--hilite]"&gt;highlight button&lt;/a&gt;
       h3 Inline Buttons
  
positive.code:         The following button,
          #[a.c-Btn.c-Btn--inline inline button],
          is in line with the text in this paragraph.
        pre.
          &lt;p&gt;The following button,
            &lt;a class="#[u c-Btn]  #[u c-Btn--inline]"&gt;inline button&lt;/a&gt;,
  
negative.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(style="margin-bottom: 1.5rem;")
          a.c-Btn.c-Btn--ghost ghost button hover
          a.c-Btn.c-Btn--ghost ghost button active
          a.c-Btn.c-Btn--ghost ghost button disabled
        div.o-Highlight.c-Banner(style="margin-bottom:1.5rem; z-index:1;")
          a.c-Btn.c-Btn--ghost ghost button inside a banner
          a.c-Btn.c-Btn--ghost ghost button hover inside a banner
          a.c-Btn.c-Btn--ghost ghost button active inside a banner
          a.c-Btn.c-Btn--ghost ghost button disabled inside a banner
        pre.
          &lt;a class="#[u c-Btn]  #[u c-Btn--ghost]"&gt;ghost button&lt;/a&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
        div(style="margin-bottom: 1.5rem;")
          button.c-Btn.c-Btn--flat flat button hover
          button.c-Btn.c-Btn--flat flat button active
          button.c-Btn.c-Btn--flat flat button disabled
        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
        div(style="margin-bottom: 1.5rem;")
          button.c-Btn.c-Btn--drawer open
          button.c-Btn.c-Btn--drawer.c-Btn--drawer--close close
        pre.
          &lt;button class="#[u c-Btn]  #[u c-Btn--drawer]"&gt;open&lt;/button&gt;
          &lt;button class="#[u c-Btn]  #[u c-Btn--drawer]  #[u c-Btn--drawer--close]"&gt;close&lt;/button&gt;
        button.c-Btn.c-Btn--drawer drawer hover
        button.c-Btn.c-Btn--drawer drawer active
        button.c-Btn.c-Btn--drawer drawer disabled
  