Skeleton UI includes a few sample buttons that you can remove, customize, or replace with your own.
Just apply a class of .btn to any a element to render the default button.
Default Button:
<a class="btn" href="#">Default Button</a>You can also pass in a named class such as .red to create a red button:
Red Button:
<a class="btn red" href="#">Red Button</a>The .btn class also accepts a few size classes:
mini, .small, .medium, .large, and .huge:
Large Blue Button:
<a class="btn blue large" href="#">Big Blue Button</a>Generating the buttons below is simple with SASS/Compass using the @simple-button mixin.
The @simple-button mixin accepts four parameters:
H,S,L (Hue, Saturation, Lightness) and $color (the text color). The mixin does the rest for you.
If you're not familiar with HSL, converting a hex color can be accomplished by using the handy HSL Color Picker. If you use Sublime Text, try the HEX to HSL conversion shortcut.
Example: partials/_buttons.scss view source.btn.orange { @include simple-button(35, 94%, 51%, #DF870B); }
The Result: Orange Button