Components - Buttons
Button layouts Basic button layout options
Default button
Default light button example
Default with icon
Available in both directions
Default with menu
Default button with dropdown
Colored button
Button with contextual colors
Colored with icon
Available in both directions
Colored with menu
Colored button with dropdown
Rounded button
Works with all button types
Rounded with icon
Available in both directions
Rounded with menu
Rounded button with dropdown
Labeled button
Works with all button colors
Rounded with label
Available in both directions
Labeled with menu
Labeled button with dropdown
Flat button
Transparent background
Colored with icon
Available in both directions
Colored with menu
Flat button with dropdown
Linked button
Transparent button example
Linked with icon
Available in both directions
Linked with menu
Linked button with dropdown
Single icon button
Button with a single icon only
Rounded icon button
Works with all button types
Icon with menu
Icon button with dropdown
Single icon button
Button with a single icon only
Rounded icon button
Works with all button types
Icon with menu
Icon button with dropdown
Floating button
Floating action button example
Floating with text
Float buttons with text and icons
Rounded float buttons
Rounded float buttons with icons
Button styling Predefined button colors and sizing
Available button styling
Button sizing and color presets
Labeled button styling
Available styling of labeled button
Rounded button styling
Available styling of rounded button
Button states
Default state
Default button state example
Active state
Active button state example
Disabled state
Disabled button state example
Icon positions
Left icon position
Display icon on the left side
Right icon position
Display icon on the right side
Right in dropdown
Additional option for right icon
Left label position
Display label on the left side
Right label position
Display label on the right side
Right in dropdown
Additional option for right label
Custom colors
Custom brown color
Custom color from brown palette
Custom pink color
Custom color from pink palette
Custom teal color
Custom color from teal palette
Button dropdowns Dropdown menus attached to buttons
jQuery Fade animation
Animate menu with fadeIn/fadeOut
Animate.css animation
Animate menu with animate.css
Velocity animation
Animate menu with Velocity.js
Dropdown variations
Button dropup
Basic button dropup example
Menu with icon
Dropdown button with icon
Segmented button
Segmented button dropdown
Rounded button dropup
Dropup attached to rounded button
Rounded button menu
Rouned button menu with icon
Rounded segmented
Rounded button with segments
Labeled button dropup
Dropup attached to labeled button
Labeled segment
Segmented labeled button
Segmented dropup
Labeled button dropup
Icon button dropup
Dropup attached to icon button
Segmented dropdown icon
Dropdown in segmented icon button
Segmented dropup button
Dropup in segmented icon button
Additional options Default button colors and sizing
Loading button
BS loading button option
Radio button group
Bootstrap radio button group
Button group
Group of buttons in btn-group
Single toggle button
Using data-toggle="button"
Button group nesting
Example of nested button groups
Button toolbar
Complex btn-group components
Checkbox button group
Bootstrap checkbox button group
Justified button group
Justified buttons in button group
Progress animation Button loading spinner with progress
Expand Left
Spinner appears on left
Expand Right
Spinner appears on right
Expand Up
Spinner appears on top
Expand Down
Spinner appears on bottom
Slide Left
Spinner slides from right
Slide Right
Spinner slides from left
Slide Up
Spinner slides from bottom
Slide Down
Spinner slides from top
Zoom In
Spinner appears after zoom in
Zoom Out
Spinner appears after zoom out
Fixed Position
Spinner appears instead of text
Border radius
Border radius animation