include "include/header_production.html"
The button examples below are the most basic ones, without any icons or additional styles applied.
The hover to background buttons have background colors only on hover, otherwise they are either white or transparent.
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.
Buttons can have four different sizes: small, medium, large and x-large.
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).
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.
You can add a separator to one of the icons for better user experience or just because you like it better that way :)
// two icons & left separator small // two icons & left separator medium // two icons & left separator large // two icons & left separator x-large // three icons with left & right separators x-large // two icons & right separator x-large // two icons & right separator large // two icons & right separator medium // two icons & right separator small
You can use the font color helpers included in the core to change the icon colors.
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 have a single line of text with or without one or two icons aligned left or right.
You can add to a regular button with text a separator to the left, right or both 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.
// right icon separator with text & left icon button // right icon separator with text & right icon button // right icon separator with text & right & left icons button // left icon separator with text & left icon button // left icon separator with text & right icon button // left icon separator with text & right & left icons button
You can also create vertical icon buttons by replacing the SIZE (.small, .medium, .large, .x-large) class with .vertical-button class.
Double buttons are regular buttons with two lines of text. They can have no icons, one left/right icon or both icons.
Double buttons can have left, right or both icons with separators.
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.
You can use the horizontal button groups to create split buttons of different sizes & colors.
Learn more about all the options for creating dropdown menus by reading the Fides Admin Dropdowns documentation page.
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.
You can create block level button groups by wrapping buttons inside a div with class .button-block.
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)
You can create justified block level button groups by wrapping buttons inside a div with class .button-block-justified.
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.
All examples below were creating using only the existing styling & helper CSS classes.
We created special styles for Twitter, Facebook, Google buttons.
You can create unique style vertical icon buttons using the core helper classes for color, icon size, background, spacing, etc.
include "include/footer.html"