Buttons
1.
Buttons Colors
This theme includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. Please remember that All Colors for the buttons are possible!
Button: Primary #1.01
Example button below
Button: Secondary #1.02
Example button below
Button: Success #1.03
Example button below
Button: Warning #1.04
Example button below
Button: Danger #1.05
Example button below
Button: Info #1.06
Example button below
Button: Light #1.07
Example button below
Button: Dark #1.08
Example button below
2.
Buttons Social Colors
Media list and media object layouts
Button: Facebook #2.01
Example button below
Button: Twitter #2.02
Example button below
Button: LastFM #2.03
Example button below
Button: Pinterest #2.04
Example button below
Button: LinkedIn #2.05
Example button below
Button: Medium #2.06
Example button below
Button: Android #2.07
Example button below
Button: Spotify #2.08
Example button below
Button: Skype #2.09
Example button below
Button: Foursquare #2.10
Example button below
Button: Youtube #2.11
Example button below
Button: Windows #2.12
Example button below
Button: Amazon #2.13
Example button below
3.
Buttons Layouts
Media list and media object layouts
Button: Outline #3.01
Example button below
Button: Outline Left Icon #3.02
Available in both directions
Button: Dropdown #3.03
Default button with dropdown
Button: Default #3.04
Button with contextual colors
Button: Left Icon #3.05
Available in both directions
Button: Dropdown #3.06
Colored button with dropdown
Button: Rounded #3.07
Works with all button types
Button: Rounded Left Icon #3.08
Available in both directions
Button: Outline Rounded Drodpown #3.09
Rounded button with dropdown
Button: Link #3.10
Transparent button example
Button: Link Left Icon #3.11
Available in both directions
Button: Link Dropdown #3.12
Linked button with dropdown
Button: Outline Icon Alone #3.13
Button with a single icon only
Button: Rounded Outline Icon Alone #3.14
Works with all button types
Button: Outline Icon Alone Dropdown #3.15
Icon button with dropdown
Button: Icon Alone #3.16
Button with a single icon only
Button: Rounded Icon Alone Dropdown #3.17
Works with all button types
Button: Icon Alone Dropdown #3.18
Icon button with dropdown
Button: Icons Only Small & Default #3.19
Floating action button example
Button: Icons Above Text #3.20
Float buttons with text and icons
4.
Buttons Styling
Media list and media object layouts
Buttons: Large, Default and Small #4.01
Button sizing and color presets
Buttons: Rounded #4.02
Available styling of .r-30 button
5.
Buttons States
Media list and media object layouts
Button: Default State #5.01
Default button state example
6.
Buttons Icons Positions
Media list and media object layouts
Button: Left Icon #6.01
Display icon on the left side
Button: Right Icon #6.02
Display icon on the right side
Button: Right Icon Dropdown #6.03
Additional option for right icon
Button: Left Icon Dropdown #6.04
Additional option for left icon
7.
Buttons Dropdowns
Media list and media object layouts
Dropdown menus attached to buttons
Button: Dropup #7.01
Basic button dropup example
Button: Left Icon Dropdown #7.02
Dropdown button with icon
Button: Group Dropdown #7.03
Segmented button dropdown
Button: Rounded Dropup #7.04
Dropup attached to .r-30 button
Button: Rounded Dropdown #7.05
Rouned button menu with icon
Button: Rounded Group Dropdown #7.06
Rounded button with segments
Button: Icon Alone Dropup #7.07
Dropup attached to icon button
Button: Group Icon Alone Dropup #7.08
Segmented button dropdown
Button: Group Icon Alone Dropdown #7.09
Dropdown in segmented icon button
Button: Dropright #7.10
Basic button dropright example
Button: Dropleft #7.11
Basic button dropleft example
Button: Dropdown Menu Right #7.12
Basic button dropleft example
8.
Buttons Options
Media list and media object layouts
Button: Group #8.01
Group of buttons in .btn-group
Button: Toolbar #8.02
Complex btn-group components
Button: Checkboxes #8.03
Bootstrap checkbox button group
Button: radios #8.04
Bootstrap radio button group
Button: Toogle States #8.05
Add data-toggle="button" to toggle a button’s active state.
Button: Block #8.06
Using .btn-block
Button: Nesting #8.07
Place a .btn-group within another .btn-group
Button: Checked Single #8.07
Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons.