Wix Editor: Customizing Text & Icon Buttons

Personalize your text & icon button so it looks exactly how you want. Update the button text as needed, design the button's appearance and adjust the layout (e.g. positioning, spacing and more).

---

Changing the button text

Enter your button text to encourage visitors to interact with your site. Some examples of possible phrases are "Contact Us", "Read More", or "Buy Now".

To change the button text:

1. Go to your editor.

2. Click the button on your page.

3. Click Settings.

4. (Optional) Click the Choose what displays drop-down and select an option: Text and icon, icon, text only, or nothing.

5. Edit the text that appears on the button under Text.

You can also choose what displays on your button (i.e. text, icon or both) from the Layout panel.

---

Designing the button

Designing your button is a great way to customize it to your site's look and needs. Adjust the design for each button state:

• Regular: How the button is displayed before it's been interacted with.

• Hover: How the button is displayed when a cursor is hovering over it.

To design the button:

1. Go to your editor.

2. Click the button on your page.

3. Click the Design icon

   

   .

4. Click Customize Design.

5. Choose a button state.

6. Adjust the design to your needs:

   • Background Fills: Choose a background color and adjust its opacity.

   • Text: Adjust the text's theme, color, font, size, and format.

   • Borders: Adjust the border's color, opacity, and width.

   • Corners: Use the boxes to adjust the pixel size of the button's corner.

   • Shadows: Add and customize a shadow on your button.

   • Layout: Edit the layout and alignment of your button.

   • Icon: Display an icon with your text and adjust its settings.

---

Adjusting the button's layout

Change the positioning, alignment and spacing between the text and / or icon on your button. You can also decide what happens when there isn't enough room on the button to show its full text.

To adjust the button's layout:

1. Go to your editor.

2. Click the button on your page.

3. Click the Layout icon

   

   .

4. Adjust any of the following settings:

   • Choose what displays: 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, 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, 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

     

     .

You can also choose what displays on your button (i.e. text, icon or both) from the Settings panel.

This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!