Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

In this article

Adding a button
Setting up a button
Customizing a button

Home

Studio, Partners & Enterprise

Wix Studio

Using the Wix Studio Editor

Adding elements in the Studio Editor

Studio Editor: Adding and Customizing Styled Buttons

6 min

In this article

Adding a button
Setting up a button
Customizing a button

Buttons are a great way to encourage visitors to engage with a site. In the Studio Editor, you can add buttons that show text, an icon or both. You have full control of the design and layout to create the exact look you need.

Examples of many button designs you can create in the Studio Editor

Important:

This article refers to the new button element in the Studio Editor. For steps on adding and working with the previous button element, please click here.

How do I know which button I have?

Adding a button

Choose whether you want to add a styled (static) button, or an animated button. They have all the same design options, and you can switch a button from styled to animated as much as you want (and vice versa).

To add a button:

Click Add Elements on the left side of the editor.
Click Button.
Click or drag an option under Styled Buttons / Animated Buttons to add it to the page.

The buttons tab is open in the add elements panel. The cursor is selecting a button.

Need some inspiration?

Check out these button tutorials:

Setting up a button

After you add a button, set up its action and choose what to show (text, an icon, or both). Depending on what the button displays, you can also set the text and icon.

To set up a button:

Select the button in your editor.
Click Settings.
Set up the button with the options:
- Choose what displays: Select an option and change the settings:
  - Text and icon: Use the Text field to change what it says, and click the Replace icon to choose a different icon.
  - Text only: Edit the button text under Text.
  - Icon only: Click the Replace icon to choose a different icon for the button.
- Links to: Click the field and set up the link from the panel:
  1. Select a link type on the left.
  2. Add the relevant link information.
  3. Click Done.
- Accessible name: Describe the button's function to visitors using assistive technologies.

The settings panel is open for a button, showing the options. The cursor is clicking the field to set up the link.

Note:

If you select Nothing under Choose what displays, the button is blank. You can still add an accessible name and link it to what you want.

Customizing a button

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