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.
Skew Outline
Extend the default outline buttons with
u-btn-skew class and use
u-btn-skew__inner for the inner content.
Gradient
Gradient Outline
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 v2
Just add a class u-btn-hover-v2-1 or
u-btn-hover-v2-2 to activate hover effect.
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
Inset Outline
Extend the default outline buttons with u-btn-inset class.
Skew Outline
Add u-btn-skew class and
use u-btn-skew__inner for the inner content.
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
Block Level Buttons
Just add a class
btn-block to make them block level view to any buttons
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.
Semi Rounded (Default)
It is default mode, you do not need to add any classes.
Pill
Add a class g-rounded-50 to make pill buttons. For
Inset buttons you should add an adition class
u-btn-inset--rounded
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.
Without Text
Also here, you may use any icons with the all buttons types and modes such as colors, sizes, angles etc.
Min Width
It can be achived by global min width classes e.g.
g-width-170 or padding classes e.g.
g-px-80
Spinners
Spinner examples are based on
font-awesome icons and you can use them with the class fa-spin
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
Skewed Pill Buttons
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.
Small Sizes (Mixed)
Medium Sizes (Mixed)
Medium Sizes (Skewed)
Extra Large Sizes
Add a class u-btn-content when there are large texts in buttons.
Extra Large Sizes
Extra Large Sizes (Bootstrap Colors)
Mixed Sizes and Styles (Block Level)
Add a class u-btn-content when there are large texts in buttons.
Block Level Button
Bootstrap Buttons
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 Examples
Just add a class
u-btn-hover-v1-* * is any numbers from 1 to 4 e.g.
u-btn-hover-v1-4