Button Customization

Caption Settings include all design settings for the Button Element.

Text

Font Family - you can choose a font from the font library or you can upload your own fonts 

Click on the font name to activate the search by fonts.

 

 

Color - Choose between a solid color or a gradient. To set the text color click on the color picker. Use the slider to adjust the opacity.

 

 

Gradient for Text:

• Up to 5 colors can be added, with smooth transitions between them.
• Only the linear gradient type is available.
   
• Important note:
  • Text hover color cannot be adjusted when a gradient is applied, as the gradient overrides the color change. To enable hover color, disable the gradient and use a solid color instead
    
    

 

Font Size (px) - to adjust the size of text element from 6px to 220px. 

 

 

Line height (%) - defines the amount of space above and below the element from 50 % to 200%.

 

 

Letter Spacing (%) -adjust space between letters from  10% to 100%.

 

 

Alignment -  is defined as the positioning of text between the margins of the outline. There are three alignments: left, right, center.

 

 

Letter Case  - change capital letters adjustment using special icons.

There are ALL LETTERS IN CAPS \ all lowercase letters \ All Letters Of Each Word With Capital.

 

 

Decoration -  set the Bold /Italic/ Underline/  Strikethrough with special icons.

 

Text Strikethrough and Underline:

• Applies the primary text color.
• If a gradient is enabled, the color set will be used in solid mode.

 

Text Direction - select the right-to-left or left-to-right text direction.

 

 

 

Text Outline:

• Adds a line around the edge of the text.
• Settings:
  • Line thickness: from 0 to 5 px.
  • Change color and transparency.
    
    

 

Text Shadow

Angle - adjust the angle of the direction of the shadow.

Distance (px) - adjust the distance of the shadow from the text from 0px to 100px.

Blur (px) - a visual effect that makes the shadow appear fuzzy or out of focus.

Shadow color - to set the shadow color click on the color picker. Use the slider to adjust the opacity.

Background button

Padding (px) - padding is space surrounding an element. 

Background color - select from solid or gradient color

To set the solid background color click on the color picker. Use the slider to adjust the opacity.

To set the gradient background color click on the color picker for each color. Use the slider to adjust the opacity.

There are 5 colors on 1 gradient layer.

Use the “Transition” option to change their location.

Border Button

Border width (px)  - to adjust the width of border from 0px to 50px.

 

 

Border color  - to adjust the border color click on the color picker. Use the slider to adjust the opacity.

 

 

Border radius (px) -  to adjust the rounded edges of border from 0px to 999px. 

 

 

 

Shadow Button

Angle - adjust the angle of the direction of the shadow.

Distance (px) - adjust the distance of the shadow from the text from 0px to 100px.

Size (px) - to adjust the size of button shadow from 0px to 100px. 

Blur (px) - a visual effect that makes the shadow appear fuzzy or out of focus.

Shadow color - to set the shadow color click on the color picker. Use the slider to adjust the opacity.