Superfly
buttons that
go 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.