:: Vsparks :: Buttons

Buttons

Button tag

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

Link

Button variations

Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.

Primary Secondary Success Info Warning Danger Link

Disabled buttons

Make buttons look inactive by adding the disabled boolean attribute to any .btn element. <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.

Primary Secondary Success Info Warning Danger

Color variations

The classic button, in different colors.

Blue Azure Indigo Purple Pink Red Orange Yellow Green Cyan

Square buttons

Add .btn-square to button to remove border-radius.

Primary Secondary Success Info Warning Danger

Pill buttons

Add .btn-pill class to any button to make them more rounded.

Primary Secondary Success Info Warning Danger

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 background images and colors on any button.

Primary Secondary Success Info Warning Danger

Button size

Add .btn-lg or .btn-sm for additional sizes.

Button with icon

Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.

Icon only button. Add .btn-icon class to remove unnecessary padding from button.

Button dropdown

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.