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

Small
Standard
Medium
Large

Aligned buttons

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

Small
Standard
Medium
Large

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.

Primary
Info
Success
Warning
Danger
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.

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta">Default</a>
<a class="button button-cta primary-btn">Primary</a>
<a class="button button-cta secondary-btn">Secondary</a>
<a class="button button-cta accent-btn">Accent</a>

Rounded buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta rounded">Default</a>
<a class="button button-cta primary-btn rounded">Primary</a>
<a class="button button-cta secondary-btn rounded">Secondary</a>
<a class="button button-cta accent-btn rounded">Accent</a>

Outlined buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta btn-outlined">Default</a>
<a class="button button-cta primary-btn btn-outlined">Primary</a>
<a class="button button-cta secondary-btn btn-outlined">Secondary</a>
<a class="button button-cta accent-btn btn-outlined">Accent</a>

Outlined rounded buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta btn-outlined rounded">Default</a>
<a class="button button-cta primary-btn btn-outlined rounded">Primary</a>
<a class="button button-cta secondary-btn btn-outlined rounded">Secondary</a>
<a class="button button-cta accent-btn btn-outlined rounded">Accent</a>

Outlined bold buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta btn-outlined is-bold ">Default</a>
<a class="button button-cta primary-btn btn-outlined is-bold ">Primary</a>
<a class="button button-cta secondary-btn btn-outlined is-bold rounded">Secondary</a>
<a class="button button-cta accent-btn btn-outlined is-bold rounded">Accent</a>

Light buttons

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

Light outlined
Light outlined rounded
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.

Default
Primary
Secondary
work Accent
SHOW CODE 
<a class="button button-cta"><i class="fa fa-shopping-cart"></i> Default</a>
<a class="button button-cta primary-btn"><i class="sl sl-icon-lock"></i> Primary</a>
<li class="tab-link" data-tab="icon-button-secondary"><a>Secondary</a></li>
<a class="button button-cta accent-btn"><i class="material-icons">work</i> Accent</a>

Square buttons

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

SHOW CODE 
<a class="button btn-square is-small"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square primary-btn"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square secondary-btn is-medium"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square accent-btn is-large"><i class="im im-icon-Yes"></i></a>

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 
<a class="button btn-square rounded is-small"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square rounded primary-btn"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square rounded secondary-btn is-medium"><i class="im im-icon-Yes"></i></a>
<a class="button btn-square rounded accent-btn is-large"><i class="im im-icon-Yes"></i></a>
4

Button effects

Disabled buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta is-disabled">Default</a>
<a class="button button-cta primary-btn is-disabled">Primary</a>
<a class="button button-cta secondary-btn is-disabled">Secondary</a>
<a class="button button-cta accent-btn is-disabled">Accent</a>

Faded buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta btn-fade">Default</a>
<a class="button button-cta primary-btn btn-fade">Primary</a>
<a class="button button-cta secondary-btn btn-fade">Secondary</a>
<a class="button button-cta accent-btn btn-fade">Accent</a>

Raised buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta raised">Default</a>
<a class="button button-cta primary-btn raised">Primary</a>
<a class="button button-cta secondary-btn raised">Secondary</a>
<a class="button button-cta accent-btn raised">Accent</a>

Gelatine buttons

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

Default
Primary
Secondary
Accent
SHOW CODE 
<a class="button button-cta g-item">Default</a>
<a class="button button-cta primary-btn g-item">Primary</a>
<a class="button button-cta secondary-btn g-item">Secondary</a>
<a class="button button-cta accent-btn g-item">Accent</a>

Loading buttons

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

Standard
Primary
Secondary
Accent
CTA
SHOW CODE 
<a class="button is-loading is-small">Standard</a>
<a class="button primary-btn is-loading">Primary</a>
<a class="button secondary-btn is-loading is-medium">Secondary</a>
<a class="button accent-btn is-loading is-large">Accent</a>
<a class="button button-cta accent-btn is-loading">CTA</a>
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.