Default Style

A condimentum vitae sapien lt skle tristique senectus et.
primary
success
secondary
primary
secondary

Button With Icon

Fringilla urna porttitor rhoncus dolor us. Luctus venenatis lectus.

primary
success
secondary
primary
secondary

Button Style

Volutpat ac tincidunt vitae semper lectus. Vestibulum mattis.

Link Style
outline style
Normal style
round style
Shadow style

Default & Light Border

A condimentum vitae sapien lt skle tristique senectus et.

primary
success
secondary
primary
secondary

Block With Icon

Fringilla urna porttitor rhoer ncus purus. Luctus venenatis lectus.

full width
full width

Button Size

Nibh ipsum conse nislquat nisl velem arcu risus quis varius quam.

small
Normal
Large
Larger

Simple Button Style

Odio aenean sed adip isnisl cing diam Amet mauris com imperdiet.

Primary
Success
Secondary
Primary
Success
Secondary

On Dark Background

Quisque non tellus orci ac aunonctor augue. Lorem et consectetur.

Primary
Success
Secondary
Primary
Secondary

Element Options Glossary

Here comes list of all options from our element with explanation in detail. This could probably
help you to find out what each option is for.

Element Options
  • Label – Type text that will be shown on button.
  • Expand – Makes button’s width 100% full.
  • Alignment – Controls button’s alignment. Choose from Left, Center, Right.
  • Link Url – Input URL where you will move when button is clicked.
  • Type – Choose button type. Choose from Default, Solid, Outline, Link.
  • Size – Choose button size. Choose from Small, Medium, Normal, Large.
  • Box Shadow – Choose box shadow effect for button. Choose from 3 shadow effects.
  • Border Style – Choose border style of Default, Solid and Outline buttons. Choose from Default, Square, Rounded, Ellipse.
  • Hover Underline – Choose hover underline effect of Link type buttons. Choose from 3 underline effects.
  • Skin – Choose color skin of buttons. Choose from Default, Primary, Secondary, Alert, Success, Dark, White.
  • Disable Line Break – Prevents the button text from placing in several rows.
  • Custom Class – Input custom classes without dot to give specific styles.
Element Options
  • Show Icon – Allows to show icon before or after button text.
  • Show Label – Determines whether to show/hide button text.
  • Icon – Choose icon from icon library that will be shown with button text.
  • Icon Position – Choose where to show icon with button text. Choose from Before/After.
  • Icon Spacing – Controls spacing between icon and text.
  • Icon Size – Controls button icon size.
  • Icon Hover Effect – Choose hover effect of buttons with icon. Choose from 3 hover effects.
  • Infinite Animation – Determines whether icons should be animated once or several times for buttons with icon.
  • Button Typography – Change font family, size, weight, text transform, letter spacing and line height of button text.
  • Min Width – Changes min width of button.
  • Padding – Controls padding value of button.
  • Border Radius – Controls border radius value of buttons.
  • Border Width – Controls border width of buttons.
  • Color, Background, Border – Choose text color, background color and border color for button on normal, hover and active events.