Different Backgrounds

There are 6 base button types classified by color skin.

Default
Primary color
Secondary color
Alert color
Success color
Dark color

Outline Buttons

Make Outline Type Buttons with Riode Button Element

Default
Primary color
Secondary color
Alert color
Success color
Dark color

Gradient Buttons

Riode provides 6 Gradient Button Types with different color skin.

Gradient 1
Gradient 2
Gradient 3
Gradient 4
Gradient 5
Gradient 6

Simple Link Buttons

Make Minimal Link Type with different Underlines or Colors.

Underline 1
Underline 2
Underline 3
Primary Color
Secondary Color
Success Color

Button Sizes

Choose Button Size from Large, Normal, Medium, Small and Full width.

Large Size
Normal Size
Medium Size
Small Size
Full Width

Shapes & Shadow

Choose Button Size from Large, Normal, Medium, Small and Full width.

Rectangle
Rounded
Ellipse
Shadow 1
Shadow 2
Shadow 3

With Icon & Animation

Make icon buttons with animations - sliding and revealing effect for one time or infinite times.

Slide left
Slide right
Slide up
Slide down
Reveal Left
Reveal Right
Infinite left
Infinite right
Infinite up
Infinite down

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.

  • 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.
  • Gradient Skin – Choose gradient color skin of gradient buttons.
  • Disable Line Break – Prevents the button text from placing in several rows.
  • Custom Class – Input custom classes without dot to give specific styles.
  • 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.