include "include/header_production.html"

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.

include "include/breadcrumb_right.html"
include "include/theming.html"

Basic

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

Hover to background

The hover to background buttons have background colors only on hover, otherwise they are either white or transparent.

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.

Toggle buttons

You can create toggle buttons using any of the available core color helpers.

Loading states

Buttons can have a loading state when clicked.

Get source

                        

                        

                        

                    

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).

Get source
                // one icon small
                
                    
                

                // one icon medium
                
                    
                

                // one icon large
                
                    
                

                // one icon x-large
                
                    
                
            

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.

Get source
                // two icons small
                
                    
                        
                        
                    
                

                // two icons medium
                
                    
                        
                        
                    
                

                // two icons large
                
                    
                        
                        
                    
                

                // two icons X-large
                
                    
                        
                        
                    
                
            

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 :)

Get source
                // 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
                
                    
                        
                    
                    
                        
                    
                
            

Icons colors

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

Get source

                // blue icon
                
                    
                        
                    
                

                // red icon
                
                    
                        
                    
                

                // orange icon
                
                    
                        
                    
                

                // green icon
                
                    
                        
                    
                

                // black icon
                
                    
                        
                    
                

                // gray icon
                
                    
                        
                    
                

                // gray dark icon
                
                    
                        
                    
                

                // white icon
                
                    
                        
                    
                

            

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)

Get source

                // default border radius
                
                    
                        default border radius
                    
                

                // all border radius 100px
                
                    
                        100px border radius
                    
                

                // all border radius 10px
                
                    
                        10px border radius
                    
                

                // all border radius 8px
                
                    
                        8px border radius
                    
                

                // all border radius 6px
                
                    
                        6px border radius
                    
                

                // all border radius 4px
                
                    
                        4px border radius
                    
                

                // all border radius 2px
                
                    
                        2px border radius
                    
                

                // removes all border radius
                
                    
                        0px border radius
                    
                

            

Regular buttons

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

Get source

                // left icon with text button
                
                    
                        
                        Left icon
                    
                

                // right icon with text button
                
                    
                        
                        Right icon
                    
                

                // left & right icons with text button
                
                    
                        
                        Both icons
                        
                    
                
            

Icon separators

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

Get source

                // left icon separator with text button
                
                    
                        
                    
                    
                        Left icon
                    
                

                // right icon separator with text button
                
                    
                        
                    
                    
                        Right icon
                    
                

                // left & right icons separators with text button
                
                    
                        
                        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.

Get source

                // right icon separator with text & left icon button
                
                    
                        
                        Button
                    
                    
                        
                    
                

                // right icon separator with text & right icon button
                
                    
                        
                        Button
                    
                    
                        
                    
                

                // right icon separator with text & right & left icons button
                
                    
                        
                        Button
                        
                    
                    
                        
                    
                

                // left icon separator with text & left icon button
                
                    
                        
                    
                    
                        
                        Button
                    
                

                // left icon separator with text & right icon button
                
                    
                        
                    
                    
                        
                        Button
                    
                

                // left icon separator with text & right & left icons button
                
                    
                        
                    
                    
                        
                        Button
                        
                    
                

            

Vertical icon buttons

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

Get source

                // vertical button with top icon
                
                    
                    Top icon
                

                // vertical button with bottom icon
                
                    Bottom icon
                    
                

                // vertical button with top and bottom icons
                
                    
                    Both icons
                    
                
            

Double buttons

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

Get source

                // double button without icon
                
                    
                        No icon
                        Double button without icon
                    
                

                // double button with left icon
                
                    
                    
                        Left icon
                        Lorem ipsum dolor
                    
                

                // double button with right icon
                
                    
                    
                        Right icon
                        Lorem ipsum dolor
                    
                

                // double button with both icons
                
                    
                    
                        Both icons
                        Lorem ipsum dolor
                    
                    
                

            

Icon separators

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

Get source

                // double button with left icon separator
                
                    
                        
                    
                    
                        Left icon
                        Lorem ipsum dolor
                    
                

                // double button with right icon separator
                
                    
                        
                    
                    
                        Right icon
                        Lorem ipsum dolor
                    
                

                // double button with both icons separators
                
                    
                        
                    
                    
                        Both icons
                        Lorem ipsum dolor
                    
                    
                        
                    
                

            

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.

Get source

                // button group with secondary theme color
                

                // button group with multiple buttons
                

            

Horizontal dropdowns

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.

Get source

                // group with two different color buttons
                


                // another group with two different color buttons
                

                // dropdown example button group
                

            

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.

Get source

                // horizontal block level button group
                

            

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)

Get source

                // single block level button
                
                    
                        
                        Single block level button
                    
                

            

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.

Link button Link button
Get source

                // disabled primary background link button
                
                    Link button
                

                // disabled primary background form submit button
                

                // disabled secondary background link button
                
                    Link button
                

                // disabled secondary background form submit button
                

            

Custom elements

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

Twitter, Facebook, Google buttons

We created special styles for Twitter, Facebook, Google buttons.

Dashboard 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"