Buttons

Button Types

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Default

Default Outline

3d

Extend the default buttons with u-btn-3d class.

Inset

Extend the default buttons with u-btn-inset class.

Inset Outline

Extend the default outline buttons with u-btn-inset class.

Skew

Extend the default buttons with u-btn-skew class and use u-btn-skew__inner for the inner content.

Primary Red Light Red Dark Red Blue Indigo Purple Dark Purple Pink Orange Deep Orange Aqua Yellow Cyan Teal Brown Blue Gray Dark Gray Black

Copy code

Skew Outline

Extend the default outline buttons with u-btn-skew class and use u-btn-skew__inner for the inner content.

Primary Red Light Red Dark Red Blue Indigo Purple Dark Purple Pink Orange Deep Orange Aqua Yellow Cyan Teal Brown Blue Gray Dark Gray Black

Copy code

Gradient

Gradient v1 Gradient v2

Copy code

Gradient Outline

Gradient v1 Gradient v2

Copy code

Button Hover Effects

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Hover v1

Just add a class u-btn-hover-v1-* * is any numbers from 1 to 4 e.g. u-btn-hover-v1-4

Hover v1 Hover v2 Hover v3 Hover v4

Copy code

Hover v2

Just add a class u-btn-hover-v2-1 or u-btn-hover-v2-2 to activate hover effect.

Hover v1 Hover v2 Hover v1 Hover v2

Copy code

Button Border Sizes

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Default Outline

Default Border 2px Border 3px Border 4px Border 5px Border 6px

Copy code

Inset Outline

Extend the default outline buttons with u-btn-inset class.

Default Border 2px Border 3px Border 4px Border 5px Border 6px

Copy code

Skew Outline

Add u-btn-skew class and use u-btn-skew__inner for the inner content.

Default Border 2px Border 4px Border 5px Border 3px Border 6px

Default Border 2px Border 3px Border 4px Border 5px Border 6px

Copy code

Button Sizes

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Default Buttons

Copy code

Block Level Buttons

Just add a class btn-block to make them block level view to any buttons

Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button

Copy code

Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button Block Level Button

Copy code

Button Angles

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

No Rounded

Add a class rounded-0 to make no rounded buttons.

Copy code

Semi Rounded (Default)

It is default mode, you do not need to add any classes.

Copy code

Pill

Add a class g-rounded-50 to make pill buttons. For Inset buttons you should add an adition class u-btn-inset--rounded

Copy code

Button Icons

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Default

You may use any icons with the all buttons types and modes such as colors, sizes, angles etc.

Button Icon Button Icon Button Icon Button Icon Button Icon Button Icon

Copy code

Without Text

Also here, you may use any icons with the all buttons types and modes such as colors, sizes, angles etc.

Copy code

Min Width

It can be achived by global min width classes e.g. g-width-170 or padding classes e.g. g-px-80

Copy code

Spinners

Spinner examples are based on font-awesome icons and you can use them with the class fa-spin

Copy code

Button Mixed Groupes

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.

Inset Pill Buttons

Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill Inset Pill

Copy code

Skewed Pill Buttons

Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded Skew Rounded

Copy code

Button Mixed Examples

Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.