Editor X: Adding and Customizing Buttons
Buttons are a great way to encourage visitors to perform the actions you want. In Editor X, you can add buttons that show text, an icon or both if needed. You have full control of the design and layout so you can create the exact look you need. In this article, learn how to:
Add a button Customize basic buttons Customize styled buttons Design glossaryAdding a ButtonWhen adding a new button, you can choose a design from two categories: 
Basic Buttons: These buttons only display text and have a more "minimal" look. Styled Buttons: These buttons can display both text and icons, and offer advanced customization options (e.g., image backgrounds, color gradients and more).To add a button:
Click Add  on the top left of Editor X.  Click Button. Scroll through the designs and drag a Basic Button or Styled Button onto your page.Learn more about basic vs. styled buttonsBetween basic and styled buttons, there are several differences you should note: Supported FeaturesAs opposed to Basic Buttons, Styled Buttons don't support the following actions:
Copying the button's design to another element  Getting content suggestions for the button textResponsive BehaviorIn smaller screen sizes, the two buttons show different responsive behavior. Basic Buttons auto-wrap the text:  

While Styled Buttons display an ellipsis:
Need some inspiration?Check out these button tutorials:
Creating a "back to top" button Creating a WhatsApp buttonCustomizing Basic ButtonsAfter adding a basic button to your site, change its text to your needs and choose where it links to.  Once that's set up, you can start customizing the design – select a different fill color, add shadow and adjust other settings like spacing and text formatting.Click below to learn how to customize basic buttons:Change the text
Select the button. Click Change Text. Enter your new text under What does this button say?.Tip: Basic buttons don't have the option to show an icon, but you can enter symbols (e.g., X, +, >) to create the same effect.Link the buttonButtons can lead to other parts of your site (e.g., pages, anchors, lightboxes), external web pages and even actions like sending you an email or making a phone call to your number.To link the button:
Select the button. Click the Link icon . Select a link type on the left. Add the relevant link information. Click Done.Design the buttonYou can tailor the design of your basic button to three different states: Regular, Hover and Disabled. Change settings like the background color, border or the shape of the button's corners.To design the button:
Select the button. Click the Inspector icon  on the top right of Editor X.  (In the Inspector panel) Click the Design tab . Select the relevant state: Regular, Hover or Disabled. Customize your button using the available options:
    
Fill Color & Opacity: Change your button's background color and adjust its opacity.  Border: Adjust the width and color of your button's borders.  Corners: Adjust the radius of the button's corners (in px) to make them more round or rectangular.  Shadow: Add and customize a shadow effect on your button.  Text: Adjust the formatting of the button text. Spacing: Adjust the spacing between the text and the button's borders.   Customizing Styled ButtonsStyled buttons offer tons of customization options so you can design them down to the last detail. Change the text and icon to match the desired action, choose how the two should be arranged, set a gradient or an image as the background and much more.Click below to learn how to customize styled buttons:Change the text and / or icon
Select the button. Click Change Text & Icon. Depending on your needs, do the following:
    
Choose an option under What does the button show?:
        
Text and icon Text only Icon only   Edit the button text under What does this button say?. Click the icon under Choose icon to replace it.  Link the buttonButtons can lead to other parts of your site (e.g., pages, anchors, lightboxes), external web pages and even actions like sending you an email or making a phone call to your number.To link the button:
Select the button. Click the Link icon . Select a link type on the left. Add the relevant link information. Click Done.Design the buttonYou can tailor the design of your styled button to three different states: Regular, Hover and Disabled. Change settings like the background color, border or the shape of the button's corners.To design the button:
Select the button. Click the Inspector icon  on the top right of Editor X. (In the Inspector panel) Click the Design tab . Select the relevant state: Regular, Hover or Disabled. Customize your button using the available options:
    
Background Fills: Choose a color, gradient or image for your button's background.  Text: Adjust the font, formatting and spacing of your button text. You can also click Shadows to add shadow to the text. Borders: Choose a color / gradient for your borders and set the thickness in px. You can apply the same design to all sides or click the Unlock icon  to customize them separately. Corners: Make your corners more round or rectangular by changing the radius in px. You can set the same radius for all corners or click the Unlock icon  to customize them separately.  Shadows: Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc.  Layout: Choose what to show on your button (text, icon or both) and how these should be arranged and aligned.  Icon: Adjust the color, size and angle of the icon appearing on your button.  Tip: Add a sense of depth to your button's background by applying multiple layers with different levels of opacity. Adjust the button's layoutChange your button's alignment, positioning and spacing so the text and / or icon look exactly how you want. To adjust the button's layout:
Select the button. Click the Layout icon .  Adjust any of the following settings:
    
Choose what to show: Decide what is displayed on your button: Text and icon, Text only, Icon only, or Nothing. Text and icon position: When choosing to show both text and an icon, you can decide how to position them: side by side, or one below the other.  Spacing between text and icon: When choosing to show both text and an icon, you can drag the slider to set the spacing between them (in px). Alignment: Align the text and icon to the left, center or right side of the button. You can also align them to both margins of the button, by clicking Justify . Overflow Content: Decide what the button shows when the button is too small to show your text and icon:
        
Ellipses: The text and icon get cropped and an ellipsis is displayed (a series of dots, e.g. "Buy this n...") All Text: The text and icon are always displayed. The size of your button changes accordingly. 
            
Wrap Text: Enable this toggle to make the button automatically fit the text and icon, breaking it to a few lines if needed.       Design GlossaryOptionExplanationHow to UseBackground FillsAdd different fills such as colors, images, patterns and gradients to create stunning and colorful effects on your button. 
Click the color box for each layer and choose the fill type, then drag the slider to change the opacity of the fill layer. Reorder the fill layers by dragging them up and down the list. BordersCustomize the button's border to make it stand out. Customize all sides of the button together, or  each side separately, by clicking the lock and unlock icon. 
Click the Width field and enter the pixel width, or adjust the slider. Click the Style drop-down and select the border style. Click the Fill color box and select the border color, and use the slider to adjust opacity. CornersChange the corners of your button to make them more rounded or square. Change the size of all the corners together, or customize each corner separately, by clicking the lock and unlock icon. Click the pixel field on a corner and enter the number of pixels you want to apply to it.ShadowsAdd layers of shadows to your button, and customize the color, size and more for each one.
Click the color box for each shadow layer and customize the color, type, angle, size, distance, and blur. Then, drag the slider to change the opacity of the shadow. Reorder the shadow layers by dragging them up and down the list. If using an Upload Button:
Click the toggle to enable. Use the sliders to edit the angle, distance, size, and blur. Then, use the slider and color box to edit the opacity and color.LayoutChange the layout of your button.
Click the Choose what to show drop-down menu and choose if you want to display the text, icon or both. Select the alignment, position and spacing of the text and/or icon (if relevant). Set the padding around the text and/or icon.Text Formatting OptionsOptionExplanationHow to UseShow TextShow or hide text on your button.Click the toggle to show or hide text on your button.ThemeSelect the theme for your button text.Select a text theme from the drop-down menu.FontsChoose the font for your button text.Click the drop-down menu and select a font.Font SizeChange the size of the text on your button.Drag the slider to increase or decrease the font size, or enter a value.Text FormattingApply formatting to your text. 
Format your text using the options: bold, italics, underline, strikethrough, colors, capitalization and text direction and alignment.Character SpacingChange the spacing between the text characters.Drag the slider to increase or decrease spacing, or enter a value.ShadowsCreate shadows for your text. You can have more than one shadow.Click Add a shadow to add a new one. Click the Customize Shadow icon to design it.Icon Design OptionsOptionExplanationHow to UseShow iconShow or hide an icon on your button.Click the toggle to show or hide the icon on your button.SizeChange the size of your icon.Drag the slider to increase or decrease the size of your icon, or enter a value.ColorChange the color of the icon.Click the color box and select a color.RotationAdjust the rotation of the icon.Drag the handle to customize the rotation of the icon, or enter the degrees in the text box.