buttons

Buttons

Base Components are usually small helper components to build Block Components.
These Components can be easily used and customized in any blocks.

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.










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.




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.



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.



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.


Without Text

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



Spinners

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



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.









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


Outline Buttons


Button Sizes


Block Level