Button Element

Friendly Button Element lets you add a variety buttons you like to you site, with abundant settings. Choose among 4 presets, namely Default, Solid, Outline and Link. And it gives you a lot of choices to customize it. The Button Element offers you wonderful skins, compatibility with any icons, icons awesome animations as well as video options with opening modal popups.

Please go to Button Element to see how it shows for a visual overview.

How To Use The Button Element

Buttons are main tool for building website. They are used frequently with different ways. They can link to a website, they can open another page on your own site, they can open a Modal dialog. You can use them in page content, widget areas, in header and footer or even in menus. They can be full width, different sizes and colors or even with charming animations. Let’s see how we use Button Element.

Step 1. Create, or choose the Column you want to add Element into. Click on Add New Element.

Step 2. Select Riode Button from the Element List.

Step 3. Configure the Button Element to some place you want in your site. And then, default button will be shown .

Step 4. Insert button text, choose alignment option, give URL, choose size and so on.

Step 5. Customize your Button. You can control the layouts, typography and colors.

Step 6. If you want, give them any animation you wish.

Step 7. Save all changes when you are finished customizing your button.

Element Content Options

Label – Inserts your button’s label.

Expand – Controls whether your button is full width or not. Yes is full width.

Alignment – Controls your button’s alignment. Here are three options – left, center and right.

Link Url – Insert your button’s specific Url.

Type – Controls your button’s type. Default, Solid, Outline and Link types are existed. You can choose any one you like.

Size – Controls your button’s size. You can choose among 4 options. They are Small, Medium, Normal and Large.

Box Shadow – Controls your button’s box shadow style.

Border Style – Controls your button’s border style.

Skin – Controls your button’s colors, such as background color, border color and label color. And you can control hover colors, too.

Disable Line-break – Controls your button’s line break mode.

Video Options – If you choose “Use as a play button in section “, you can play video wherever you set video in parent section. Or if you choose “Use as Video button”, you can play video on lightbox.

Element Style Options

Button Style Box – Controls Label Typography, Min Width, Paddding, Border Radius, Border Width, Colors and Box Shadow for your buttons.

Demos