Superfly CSS Component Button Tests
Superfly
buttons that
go BAM !
Button
A button's border and background color are not specified.
              
<a class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
Both the border and the background is transparent.
booyakasha
Button
A button's focus, hover, or active state is triggered.
              
<a style="outline-color: pink" class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
No outline is rendered by default.
booyakasha
Button
Buttons are marked up inline.
              
<a class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</a>

<a class="Button
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
They render inline.
booyakasha booyakasha
Button
The button is disabled.
              
<a class="Button
          onDisabled
          u-letter-spacing-1x
          u-on-hover-background-color-555
          u-text-color-white
          u-font-open-sans
          u-background-color-444
          u-border-color-222
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</a>
it renders with reduced opacity and does not respond to pointer events.
booyakasha
Button
Text color is not specified.
              
<div class="u-text-color-tomato">
        <button class="Button
                  u-letter-spacing-1x
                  u-font-open-sans
                  u-background-color-222
                  u-border-color-444
                  u-on-hover-text-color-888
                  u-on-active-invert-100
                  u-font-weight-300
                  u-font-size-500">booyakasha
        </button>
</div>
Text color is inherited.
Button
Font is not specified.
              
<div class="u-text-color-tomato u-font-baloo-bhaina">
        <button class="Button
                  u-letter-spacing-1x
                  u-on-hover-text-color-888
                  u-background-color-222
                  u-border-color-444
                  u-on-active-invert-100
                  u-font-weight-300
                  u-font-size-500">booyakasha
        </button>
</div>
The font is inherited.
Button
Text color is not specified.
              
<div class="u-text-color-neon-mustard">
        <button class="Button
                  u-letter-spacing-1x
                  u-on-hover-text-color-888
                  u-background-color-222
                  u-border-color-444
                  u-on-active-invert-100
                  u-font-weight-300
                  u-font-size-500">booyakasha
        </button>
</div>
Text color is inherited.
Button
The button is not wide enough.
              
<button class="Button
          u-letter-spacing-1x
          u-on-hover-text-color-888
          u-text-color-neon-mustard
          u-width-8x
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">Moshi Moshi
</button>
The label wraps.
Button
Buttons with different heights are inlined.
              
<button class="Button
          u-letter-spacing-1x
          u-on-hover-text-color-888
          u-text-color-neon-mustard
          u-width-8x
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">Moshi Moshi
</button>

<button class="Button
          u-letter-spacing-1x
          u-on-hover-text-color-888
          u-text-color-neon-mustard
          u-width-8x
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">Moshi
</button>
The tops align.