General Buttons

Use a classes .btn .btn-primary to create a general btn.

Button Tags

The .btn classes are designed to be used with the button element.

Link
Outline Button

Use a classes .btn .btn-outline-primary to create a outline btn.

Rounded Button

Use a classes .btn .btn-rounded to create a rounded btn.

Rounded Outline Button

Use a classes .btn .btn-rounded .btn-outline-primary to create a rounded outline btn.

Button Size

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

Rounded Button Size

Use a classes .btn .btn-rounded .btn-lg or .btn-sm to create a rounded btn.

Rounded Outline Button Size

Use a classes .btn .btn-rounded .btn-outline-primary .btn-lg or .btn-sm to create a rounded outline btn.

Block buttons

Use a classes .btn .btn-block to create a block btn.

Rounded Block buttons

Use a classes .btn .btn-block .btn-rounded to create a rounded block btn.

Outline Block buttons

Use a classes .btn .btn-block .btn-outline-primary to create a outline block btn.

Rounded Outline Block buttons

Use a classes .btn .btn-block .btn-rounded .btn-outline-primary to create a rounded outline block btn.

Button with icon

Use a classes any web icon code to create a button with icon.

Split Button Dropdown

The best part is you can do this with any button variant.

Circle Button

Use a classes .btn .btn-circle to create a circle button.

Circle Large Button

Use a classes .btn .btn-circle .btn-lg to create a circle large button.

Social Button

Use a classes .btn .btn-circle to create a social button.

Gradient Hover Effect

Hover Effect Rounded

Default Animated Buttons

Rounded Animated Buttons

Solid Border Style

Dashed Border Style

Dotted Border Style

Double Border Style

Fancy Button

Expand Left
Expand Right
Expand Up
Expand Down
Slide Left
Slide Right
Slide Up
Slide Down
Zoom In
Zoom Out
Expand Right

Buttons Sizes

Extra Small
Small
Large
Extra Large