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





We offer best in class service for your needs

About Us

About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.

Latest Posts



Our Contacts

795 Folsom Ave, Suite 600,
San Francisco, CA 94107 795

(+123) 456 7890
(+123) 456 7891