brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Buttons

Default buttons

Quickly create a general button with several predefined button styles, each serving its own semantic purpose.

Class Values
class="btn btn-[value]" primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke
Rounded buttons

Create rounded buttons by simply adding .btn-rounded class.

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all colors on any button.

Sizes

Fancy larger or smaller buttons? Add .btn-lg,.btn-sm or .btn-xs for additional sizes.

Block buttons

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Use .disabled class in link buttons.

Disabled Link
Gradient buttons
Brunette only

Replace the default modifier class with the .btn-gradient-* once to create gradient button.

Class Values
class="btn btn-gradient-[value]" primary / success / warning / danger / info / light / dark / pony / space / streaks / bunting / paradise / heaven / honey / warbler / dusk / citrine / royston / ashes / metal / sunset
Dropdown & Dropup Buttons

Any single button can be turned into a dropdown toggle with some markup changes. For dropup button, trigger dropdown menus by adding .dropup to the parent element.

Buttons with Icons
Brunette only

An icon can be used as a label for a button. Use .btn-wth-icon class to create button with icon. To change the position of icon to right, simply add .icon-right class.

Social buttons

Social buttons are same as icon buttons with social icons. Create many styles using icon button classes.

Icons buttons
Brunette only

A button can have a single icon also. Create icon buttons using .btn-icon class For circle buttons add .btn-icon-circle class.

Icon Button Styles

Brunette comes with different animation styles to create interest in regular style icon buttons.

Style 1
Style 2
Style 3
Style 4
Style 5
Button group

Wrap a series of buttons with .btn in .btn-group.

Button toolbar
Sizing



Nesting
Button group vertical

Make a set of buttons appear vertically stacked rather than horizontally.

Nesting