# Wix Editor: Customizing Text & Icon Buttons

Source: https://support.wix.com/en/article/wix-editor-customizing-text-icon-buttons (updated 2026-01-25)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

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](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26).
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**.

![button settings panel in wix editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/29/4f4460cf-c393-4c70-9794-5d7608109215/afa04e7b-6d5f-4ec4-a505-2e48c7a6929c.png)

> 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](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26).
2. Click the button on your page.
3. Click the **Design** icon ![](https://d2eyqiy4n03ve6.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2015/08/03/974c50b4-3472-4fd0-b0eb-bf70636220c6.png).
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.

![button design panel in wix editor](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/29/83fe4a9d-aa54-4c07-a5fb-5cdc6748d52b/93bc6055-8228-4251-bd40-0eced103dc96.png)

---

## 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](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26).
2. Click the button on your page.
3. Click the **Layout** icon ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/07/26/8e428eb0-e870-446c-b3e5-11fb7f9bb64d/ea84a13e-3e51-44c6-9073-35745f95e190.png).
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** ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2022/07/26/7b2538db-a825-491f-a6e3-e0dbea7fa5bf/f525d252-55a2-41c1-a34b-f306c6037242.png).

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

![button layout panel in wix editor.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/11/29/3e9eec6c-6741-43d8-8972-bfa9fc2d29fe/abefb087-1c97-4194-b9c8-dc1b69c339ad.png)