Buttons You can transform any form submit elements or regular links into buttons by adding certain CSS classes for configuring the size, color and icon & text alignment.

Basic

The button examples below are the most basic ones, without any icons or additional styles applied.

Font color

You can use the font color helpers included in the core to create all kinds of elements. In this case, we prepared an example using buttons.

Sizes

Buttons can have four different sizes: small, medium, large and x-large.

Buttons with one icon

To create this kind of button you have to replace the .button-content element with the icon wrapper which is identified by having any CSS class starting with .icon-. If you want the icon buttons to be perfectly square you shoudn't include the icon wrapper in the .button-content element (example below).

Buttons with two icons

This kind of buttons are very useful if you want to create drop downs & similar stuff. Read more on how to change the actual icon size below.

Buttons with two icons & separator

You can add a separator to one of the icons for better user experience or just because you like it better that way :)

Icons colors

You can use the font color helpers included in the core to change the icon colors.

Border radius helpers

You can use the border radius helpers included in the core to change the CSS3 border radius of the elements, in this case, icon buttons. The border radius helper classes can be applied to either all borders or only specific borders (eg. top right, bottom left & right, etc)

Regular buttons

Regular buttons have a single line of text with or without one or two icons aligned left or right.

Icon separators

You can add to a regular button with text a separator to the left, right or both icons.

Icon separators & normal icons

You can add to a regular button with text, beside a separator to the left, right or both icons, another left, right or both icon.

Vertical icon buttons

You can also create vertical icon buttons by replacing the SIZE (.small, .medium, .large, .x-large) class with .vertical-button class.

Double buttons

Double buttons are regular buttons with two lines of text. They can have no icons, one left/right icon or both icons.

Icon separators

Double buttons can have left, right or both icons with separators.

Horizontal groups

Button groups help you create split buttons, paginations and toolbars. You must put at least two buttons inside, otherwise there is no point in using a button group. To create horizontal button group you have to wrap the buttons in a div with class button-group. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.

Horizontal dropdowns

You can use the horizontal button groups to create split buttons of different sizes & colors.

Vertical groups

To create horizontal button groups you have to wrap the buttons in a div with class .button-group. If the themes has border-radiuses defined, the button groups with add the necessary radiuses to the first and last button.

Horizontal block level groups

You can create block level button groups by wrapping buttons inside a div with class .button-block.

Single block level button

If you want only one button to have block level behaviour or do not want to use the .button-block wrapper, you can add the following classes to a button to make it block level: display-block and float-none (not required, but good to have)

Justified block level groups

You can create justified block level button groups by wrapping buttons inside a div with class .button-block-justified.

Disabled states

Beside the normal, active, focus, hover we all know that buttons also have a disabled state. You can disable a button in two ways: using the .disabled class for links or adding the disabled attribute to form buttons.

Custom elements

All examples below were creating using only the existing styling & helper CSS classes.

Custom styling using core helpers

You can create unique style vertical icon buttons using the core helper classes for color, icon size, background, spacing, etc.