Button Element

Button element will help you to insert a button any section or column you want. Moreover, you can creatively design it and make it one of the most attractive object of your site.

To use this element, follow these steps.

• Select Add New Element from column
• An elements list modal will open
• From there select Button element

Here you’ll find three tabs - General, Styles, & Advanced.These tabs will help you to modify the element in your own way. You can modify the button, add hover effect, apply animations etc. The details are given below.

General

The general tab holds the basic settings of button element. You can do the following changes here:

• Text - The text field will help you to write the text you want to show on the button. This will give idea to your visitors or clients on what type of button they want to click.
• Type - The button type is available in case you can’t decide the button option you want to use for. Usually we use red button to show danger, yellow for warning, green for safe etc. you can think of it as a pre-made button.
• Outline - These is an option for enable and disable of outline. By enabling outline, your button will appear with no background but just with border.
• Full Width- Full width option will allow you to set the button in a wide range. This will only increment in width.
• Icon- The icon option will allow you to set an icon along with the button text. This is completely optional. If you want you can use it or just leave it empty.
• Icon Placement- The icon placement option will allow you set the position of icon in the button filed. It can be placed either in the left side or in the right side.
• Link - Allows you to add a link to the heading. If you want, you can set a link to the heading moving to another page. This is optional.

---

Styles

Styles tab will help you to style up the button. Here you’ll find five editing fields - Basic, Typography, Background, Text Color and Border. The editing options for these fields are described in details below.

• Alignment- Alignment will help you to set the button in alignment. There are three options available- left, center, and right.
• Padding- Padding allows you add space inside the button. If you find it necessary, you can use it.
• Icon Spacing- This scroll bar will help you to set the space between icon and button text. This option is available both in pixel and percentage.
• Font - Font option will help you to change the font of text. There are thousands of google font provided in a dropdown option. You can go for any of them.
• Weight- You can select the weight of specific fonts from the provided field. The higher the number of font weight you set, the bold your text will look.
• Size - You can control the size of both text and shape. Just scroll the slider and set the size. Or just provide a digit value for it in the value box situated right next to the slider.
• Transform- This field will help you to change the capitalize of the text. All you need to do is to select from the dropdown option.
• Style- This field will allow you to set the font style. You can set normal, italic or oblique.
• Decoration- You can decorate the text by selecting overline, underline or strikethrough.
• Line Height - Line height option will help you to set the height of each and every line. This will insert space between the lines.
• Letter Spacing -Letter spacing option will help you to set space between each and every letter. This will help you to avoid the collision between the letters.
• Text Shadow - Text shadow effect will help you to add a shadow under the digit or text to give a 3D look. You can even blur the effect to show your text clearly.
• Color - A few color picker is provided for different operations. You’ll find color setting options for text, background and border.
• Border Type- There is a border option for image. You can set borders for images as there are 4 types available - solid, double, dotted, and dashed.
• Border Width- Border width will help you to set the width of the border. You can make it thin like a paper or thick like a frame.
• Border Radius- Border radius gives the corners of a border a round shape. If you want you can make the sharp corners a smooth round shape.

---

Advanced Tab

The advanced tab has the advanced level of settings. You can edit them if you find it necessary or just leave it just the way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple colors.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.