mass media

All-in-one Marketing app

Buttons

Button styles and variations.

Get Started

1

Basic buttons

Bulma buttons

You can use the default buttons if you want to. Add a class of .button to a a or a button element. Available classes for sizes are .is-small, .is-medium, and .is-large

Aligned buttons

If you want to center vertically the text inside the button, you can add the class .btn-align.

Bulma native colors

You can use the Bulma native color scheme if you want to. Some of the available classes are .is-primary, .is-info, .is-success. Check the Bulma documentation for all button colors.

2

Bulkit buttons

Bulkit CTA

Bulkit brings in CTA buttons that can also be reused for other purposes. Add the class .button-cta. You can also define button colors regarding the current selected Bulkit theme. The available color classes for buttons are primary-btn, secondary-btn,accent-btn.

SHOW CODE

Rounded buttons

You can make a button rounded by adding the class .rounded

SHOW CODE

Outlined buttons

You can make a button outlined by adding the class .btn-outlined

SHOW CODE

Outlined rounded buttons

You can make a button both outlined and rounded by adding the classes .btn-outlined and .rounded

SHOW CODE

Outlined bold buttons

You can make an outlined button bolder by adding the classe .is-bold to a button with the .btn-outlined class.

SHOW CODE

Light buttons

Light buttons cans be used on darker backgrounds. Simply replace the color class with the .light-btn class.

3

Icon buttons

With icons

Add an icon i tag (eg: class="fa fa-shopping-cart") inside a .button element to create a button with icon. Icons can be placed before or after the button text. You can chose any icon from Font Awesome, Simple line icons, Icons Mind or Material icons.

SHOW CODE

Square buttons

Square buttons don't have any text, just a single icon. Available button sizes also apply to square buttons.

SHOW CODE

Circle buttons

Like square buttons, Circle buttons don't have any text, just a single icon. Available button sizes also apply to circle buttons.

SHOW CODE
4

Button effects

Disabled buttons

A button can be disabled by adding the class .is-disabled.

SHOW CODE

Faded buttons

A button can fade on hover by adding the class .btn-fade to a .button element.

SHOW CODE

Raised buttons

A button can raised on hover by adding the class .raised to a .button element.

SHOW CODE

Gelatine buttons

A button can animate on hover by adding the class .g-item to a .button element.

SHOW CODE

Loading buttons

A button can be set to loading state by adding the class .is-loading to a .button element.

SHOW CODE
5

Social buttons

Social buttons

Add an icon i tag (eg: class="fa fa-shopping-cart") inside a .button element to create a button with icon. Icons can be placed before or after the button text.

Social icon buttons

Add an icon i tag (eg: class="fa fa-shopping-cart") inside a .button element to create a button with icon. Icons can be placed before or after the button text.