Skip to content

Elements:Buttons

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

Styles

Default


Outlined

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





Medium (default)





Large





Extra Large




Block level (full width)


Button borders

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

.border-w-2

.border-w-3

.border-w-4

.border-w-5


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.

Outline buttons

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.




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.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage