Superfly
buttons that
go BAM !
Bam !
Button
Buttons are marked up inline.
              
<a class="Button
          u-on-hover-background-color-555
          u-margin-top-1x
          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-on-hover-background-color-555
          u-margin-top-1x
          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.
Button
The button is disabled.
              
<a class="Button
          onDisabled
          u-on-hover-background-color-555
          u-margin-top-1x
          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>
              
            
Then it renders with reduced opacity and does not respond to pointer events.
Button
Text color is not specified.
              
<button class="Button
          u-margin-top-1x
          u-font-open-sans
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</button>
              
            
Then text color is inherited.
Button
Font is not specified.
              
<button class="Button
          u-margin-top-1x
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</button>
              
            
The font is inherited.
Button
Text color is not specified.
              
<button class="Button
          u-margin-top-1x
          u-background-color-222
          u-border-color-444
          u-on-active-invert-100
          u-font-weight-300
          u-font-size-500">booyakasha
</button>
              
            
Then text color is inherited.
Button
The button is not wide enough.
              
<button class="Button
          u-margin-top-1x
          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>
              
            
Then the label wraps.
Button
Buttons with different heights are inlined.
              
<button class="Button
          u-margin-top-1x
          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-margin-top-1x
          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.