Pattern: btn-[size].

size can be sm | md | lg | xl.

Pattern: btn-gradient-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[shade3].

For each color you can also specify an opacity if you want. The shades are always optional and the third color is also optional.

Pattern: btn-glass-[color]-[shade].

The shade is optional.

Pattern: btn-glass-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[shade3].

For each color you can also specify an opacity if you want. The shades are always optional and the third color is also optional.

Pattern: btn-border-[base_color]-[base_shade]-[direction]-[color1]-[shade1]-[color2]-[shade2]-[color3]-[shade3].

The base color and shade are the background overlay color of the button. You can add an opacity to overwrite the deafault opacity to it. The direction can be: l | r | t | b | bl | br | tl | tr. If you do not provide a direction r will be chosen. The 3 color values are for the gradient. For each color you can optionally define a shade. Shade 500 is the default.

You can add icons inside span elements inside your button and use the regular btn classes to set the colors and size.

Add the btn-icon class to buttons that only have an icon and no text.

Allows you to group children button or anchor elements together.

Pattern: btn-group-[color]-[shade].

Creates a horizontal button group with the given color and shade. The shade is optional.

Pattern: btn-group-vertical-[color]-[shade].

Creates a vertical button group with the given color and shade. The shade is optional.

Pattern: btn-group-outline-[color]-[shade] or btn-group-vertical-outline-[color]-[shade].

Create a button group with outlines. This works for both horizontal and vertical groups. Shades are optional.