Button Element

Button

To add a "Button" element to your page, drag and drop the paragraph in the editor's space to manage the settings.

General Settings

The button setting is a bit complex compared to the previous Elements setting.

Element Name/Title

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

Background Color

If you want to change the background color of your button, you can do that by clicking on the content you want to adjust its background.

Letter Spacing

You can decide how wide apart you want the letter in your button to be by clicking on this option.

Text Shadow

If you want your text/content to have a shadow, simply select how strong or light you want the shadow to be.

Desktop and Mobile Font Size

You can adjust the mobile and desktop font sizes of the text/content simply by adjusting the size bars.

Sub-Text Desktop and Mobile Font Size

You can adjust the mobile and desktop font sizes of the sub-text/content simply by adjusting the size bars.

Typography Type

Here you can edit the font of the button text/content.

Icon picker

Here you can add icons to your buttons. when you add an icon, it's going to position before the text in the button.

Icon Picker (After)

Here you can add icons to your buttons. when you add an icon, it's going to position after the text in the button.

Color Options

Color

You can only adjust the text color in the button here, For example, the "Click to Signup" text

Sub-Text Color

When you add a sub-text to your button, you can only adjust the color in the button here.

Spacing Option:

There are different spacing options available for adjusting your button. Depending on the Edit option you are working on, the settings will only be applicable to that option.

• Padding Left, Right, Top, and Bottom
  This Four (4) different toggle bar moves the content to either the left, right, top, or bottom depending on the toggle bar you click on.
  
  
• Margin Top and Bottom
  You can adjust the top or bottom margin of your content by toggling its bars.

Text Options

Text

This is where you can add/edit the text in your button.

Sub Text

If you like to add a subtext to your button, simply type it here.

Button Actions

Link To

You can select from the options where you like to link this particular button to.

Theme Settings

You can select a theme from the theme options available here.

Advanced Settings

Text Transform

In the Text Transform, you can decide to change the text to Uppercase, Lowercase, or just capitalize each word.

Full Width

You can decide to make the button a full size of the element box or just as fluid.

Button Effect

You can add an effect to your button by simply selecting your choice from the options.

Button Shadow

If you want your button to have a shadow, simply select how strong or light you want the shadow to be.

BackGround Styles

You can decide to keep the background of your button or just remove it so it's just the text that will appear.

Vertical and Horizontal Spaces

You can increase or decrease the height and width of the button in these spaces.

Visibility

You can make this page visible on both desktop and mobile, and you can also select just one of the two by simply clicking on the one you want to activate.

Custom Class

Press enter or space to add a class.

Border Options:

• Border
  ****You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up;
  
• Style
  ****There are three (3) Different styles for your border, It could be a solid, Dashed, or Dotted border.
  
• Width
  ****When you increase the border width, it increases the thickness of the border.
  
• Color
  ****To change the color of the border, click on this color icon.
  
• Radius
  ****Adjusting the radius of your border curves the edges of the border, the higher the number you select, the curvier it becomes.
  
• Radius Edge
  ****You can decide the corner of the border you want to curve, either all edges, Top only or bottom edge only.

CSS Selector

You can copy a CSS Selector by clicking on the "copy" icon on the right side of the reference number you want to copy.