Buttons
Add .button to a, button, input[type="button"], input[type="submit"] elements.
<a class="button" href="#" role="button">Link</a>
<button class="button" type="submit">Button</button>
<input class="button" type="button" value="Input">
<input class="button" type="submit" value="Submit">Colors
Add .success, .error etc., classes to change color of buttons. Colors can be easily added or removed by editing the colors variable in variables.styl file.
<button class="primary button" type="button">primary</button>
<button class="secondary button" type="button">secondary</button>
<button class="success button" type="button">success</button>
<button class="error button" type="button">error</button>Outline
Add .outline class to give a cleaner look to buttons.
<button class="primary outline button" type="button">primary</button>
<button class="secondary outline button" type="button">secondary</button>
<button class="success outline button" type="button">success</button>
<button class="error outline button" type="button">error</button>Sizes
Change size using .size-small, .size-large helper classes.
<button class="size-large button" type="button">size-large button</button>
<button class="size-large outline button" type="button">size-large button</button><button class="size-small button" type="button">size-small button</button>
<button class="size-small outline button" type="button">size-small button</button>Set display property of buttons or other content to block using the .block helper class.
<button class="block button" type="button">block button</button>
<button class="block outline button" type="button">block button</button>Active
Add .active class to buttons.
<button class="active button" type="button">active button</button>
<button class="active outline button" type="button">active button</button>Disabled
Add disabled attribute to buttons to disable them. This doesn't work on a tags.
<a disabled class="button" href="#" role="button">Link</a>
<button disabled class="button" type="submit">Button</button>
<input disabled class="button" type="button" value="Input">
<input disabled class="button" type="submit" value="Submit">