AppStrap.

• More Theme Elements
• Alerts
• Animations
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Flags
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Spacers
• Tables
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks

Button styles you can use on a , button , input elements.

Styles

Default

Secondary Primary Info Success Warning Danger Dark/Inverse Light Link
green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

Outlined

Secondary Primary Info Success Warning Danger Dark/Inverse green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

Invert

Inverts the default & hover states, useful if using a background colour the same as the button.

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Rounded

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Shadow

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Sizes

Small

Secondary Primary Info Success Warning Danger Inverse Link
green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

---

Secondary Primary Info Success Warning Danger Inverse green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Medium (default)

Secondary Primary Info Success Warning Danger Inverse Link
green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

---

Secondary Primary Info Success Warning Danger Inverse green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Large

Secondary Primary Info Success Warning Danger Inverse Link
green red blue purple pink orange lime blue-dark red-dark brown cyan-dark yellow slate olive teal green-bright

---

Secondary Primary Info Success Warning Danger Inverse

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Extra Large

---

---

---

Block level (full width)

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Button borders

Control button border widths using the .border-w-(2-5) classes, works mainly with outline button style.

.border-w-2

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

.border-w-3

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

.border-w-4

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

.border-w-5

Secondary Primary Info Success Warning Danger Inverse Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

---

Icon buttons

Add the class .btn-icon to fix the width & height of a button so it can be used to display a single icon. Works with all icons defined on elements-icons.htm.

Default

Outlined

Rounded

Sizes

small:

---

Default:

---

Large:

---

Extra Large:

---

States

Active

Secondary link Primary link Info link Success link Warning link Danger link Inverse link Green link Red link Blue link Purple link Pink link Orange link Lime link Blue-dark link Red-dark link Brown link Cyan-dark link Yellow link Slate link Olive link Teal link Green-bright link

Outline buttons

Secondary link Primary link Info link Success link Warning link Danger link Inverse link Green link Red link Blue link Purple link Pink link Orange link Lime link Blue-dark link Red-dark link Brown link Cyan-dark link Yellow link Slate link Olive link Teal link Green-bright link

Disabled

This can be applied as .disabled class for links or a disabled attribute for buttons.

Secondary btn Primary btn Info btn Success btn Warning btn Danger btn Inverse btn Green btn Red btn Blue btn Purple btn Pink btn Orange btn Lime btn Blue-dark btn Red-dark btn Brown btn Cyan-dark btn Yellow btn Slate btn Olive btn Teal btn Green-bright btn

Outline buttons

Secondary btn Primary btn Info btn Success btn Warning btn Danger btn Inverse btn Green btn Red btn Blue btn Purple btn Pink btn Orange btn Lime btn Blue-dark btn Red-dark btn Brown btn Cyan-dark btn Yellow btn Slate btn Olive btn Teal btn Green-bright btn

Toggle State

Add data-toggle="button" to allow the buttons active state to be toggle on click, works on button & can be used on checkboxes and radion form elements.

Single toggle

---

---

---

Button with dropdowns

By wrapping .btn elements with a .dropdown element you can easily add dropdown menus for buttons.

button element

a element

Styles

The standard button styles can be applied to the buttons with dropdowns as well.

Split button dropdowns

Split button dropdowns allow you to have an "action" button and a dropdown button within the same visual button by adding 2 buttons within a button group and adding .dropdown-toggle-split class to the second button.

Sizing

The .btn-lg and .btn-sm classes can be applied to buttons within split buttons and dropdown buttons.

Dropup buttons

Dropup buttons are exactly the same and can uses all the same options expect the menu "drops up" and appears above the button rather than below.

Simple add the class .dropup to the wrapper .btn-group element.