Wix Editor: Customizing Text & Icon Buttons

4 min read

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).

In this article, learn more about:

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 Elements 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:

Go to your editor.
Click the button on your page.
Click Settings.
Choose one of the following options from the Choose what displays drop-down:

Text and Icon

Icon only

Text only

Nothing

You can also choose what displays on your button 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:

Go to your editor.
Click the button on your page.
Click the Design icon .
Click Customize Design.
Choose a button state.
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:

Go to your editor.
Click the button on your page.
Click the Layout icon .
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 .