Buttons
Buttons are a convenient tool when it comes to more traditional actions. To that end, Suit has a lot of easy to use button styles that you can customize or override to fit your needs.
Basic
You can create a button using minimal markup.
Advanced
You can also use input[type="submit"], input[type="button"], and button markup.
Advanced
Additional classes can be added to your component to change its appearance.
<!-- Size Classes -->
<a href="#" class="button [tiny small large]">Default Button</a>
<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>
<!-- Expand Class -->
<a href="#" class="button expand">Expanded Button</a>Button Colors
Buttons have all the following color classes available to them. The secondary class looks slightly different depending on if the section has a dark background. The transparent class also adjusts for dark sections.
Call To Action Buttons
Call to action buttons are elements that associate an action or behavior with a button click. Coupled with a graphic element, a call to action button strengthens the engagement a user has with our interfaces.
The structure of a call to action button is simple. There are two steps:
- Add the 'cta' class to a
.buttonlink. - Define a span element with the class of a font icon inside of the button element.
NOTE: The call to action pattern will not work on input elements such as the submit button of a form.
Sizes:
Additional classes can be added to your call to action buttons to change their appearance. All the classes that are available to buttons are available here.
Tiny
Small
Large
Expand
Icons:
You can change the graphic to the right of the text of a call to action button by specifying the class in the span element as one of the available font icons.