Different Backgrounds
There are 6 base button types classified by color skin.
Outline Buttons
Make Outline Type Buttons with Riode Button Element
Gradient Buttons
Riode provides 6 Gradient Button Types with different color skin.
Simple Link Buttons
Make Minimal Link Type with different Underlines or Colors.
Button Sizes
Choose Button Size from Large, Normal, Medium, Small and Full width.
Shapes & Shadow
Choose Button Size from Large, Normal, Medium, Small and Full width.
With Icon & Animation
Make icon buttons with animations - sliding and revealing effect for one time or infinite times.
On Background
Please check how Riode buttons are shown above images.
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.