Wix Editor: Customizing Text & Icon Buttons

3 min read

Text buttons contain clear call-to-actions that encourage your visitors to interact with your site, as well as perform actions.

In this article, learn how to:

Using Text Buttons?

You can customize text buttons already present on Wix sites, however it is no longer possible to add the old text buttons to your site. We recommend using the new text buttons, which can be found under Text & Icon buttons in the Add panel.

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:

Click the button in the Editor.
Click Change Text & Icon.
Enter your chosen text under What does it say?

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:

Click the button in the Editor.
Click the Design icon .
Click Customize Design.
Choose a button state.
Customize the button using the design options below:
- Background Fills: Choose a background color and adjust its opacity.
- 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.
- Text: Adjust the text's theme, color, font, size, and format.
- 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:

Click the button in the Editor.
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 .