Using the Wix Harmony Editor

Adding and customizing elements

Wix Harmony Editor: Adding and Customizing Buttons

Buttons add style and interactivity to your site, making it easy for visitors to navigate, find what they need, and stay engaged. Link your buttons to other pages, documents, or external sites to guide people exactly where you want them to go.

For example, if you run an online store, you can use buttons to spotlight special offers, highlight popular products, or send customers straight to the checkout, making every visit more rewarding.

Adding a button

You can add a button from the Add Elements panel on the left side of the editor. There are several different options available, with a range of layouts.

To add a button:

Go to your editor.
Click + Add at the top left of the editor.
Select Elements.
Click the Buttons icon
on the left.
Drag a design you like onto your page.
Choose where the button leads:
1. Click the new button on the page.
2. Click the Link icon
  on the action bar.
3. Click Choose a link.
4. Choose a link type from the options at the top and set up the link details.

A screenshot of the buttons available in the Add Elements panel.

Customizing a button

There are a variety of ways to customize your buttons. Depending on the button type, you can adjust the background, text, and icon. Choose colors, fills, corners, shadows, and more to create eye-catching effects as visitors navigate your site.

Experiment with vibrant, distinct colors and design options to make each button stand out and match your site's look and feel .

To customize a button:

Go to your editor.
Click the relevant button.
Choose what you want to do:

Edit the text on your button

Click Edit Text on the action bar.
Enter the text you want for your button into the Text field.

Change your button's style

Click Button styles on the action bar.
Choose whether to update one of the existing styles or save it as an additional style.

Learn more about updating button styles.

Customize the button's hover state

Click the Hover design icon
on the action bar.
Choose what happens when visitors hover over the button:
- Underline: Show an underline below the button text.
- Shadow: Show a shadow behind the button.
- Invert: Flip the button's colors (the text color and background color switch).
- Tint: Slightly change the button's background color to a different shade.
- Glow: Add a bright, subtle shadow behind the button.
- All design options: Customize the hover state's design to your exact needs, choosing the fill color, shadow, borders, and more.

Show or hide elements on your button

Click the Display elements icon
on the action bar.
Select the check box to show or hide the text or icon from your button.

Replace the icon on your button

Click Customize Icon on the action bar.
Click the Replace icon
.
Scroll through the available options, or filter by:
- Type: Choose a basic vector art shape, an app icon, or an animated icon.
  Tip: If you choose an animated icon, you can adjust the duration of the animation by using the slider. Learn more about animated icons in the section below.
- Category: Select a category for each icon type, such as actions, toggles, or social media app icons.
- Orientation: Filter the options by horizontal or vertical icons.
Select a design you like and click Update.

Add animation to your button icon

Animated icons bring your buttons to life by adding motion and style. Set your own start and end icons, customize how the animation looks, and adjust its speed to fit your site’s design.

Click Customize Icon on the action bar.
Click Animated.
Click Create Animated Icon.
Click the Add icon
under Start icon.
Scroll through the available options, or filter by:
- Type: Choose a basic vector art shape, or an app icon.
- Category: Select a category for each icon type, such as actions, toggles, or social media app icons.
- Orientation: Filter the options by horizontal or vertical icons.
Select a design you like and click Update.
Click the Add icon
under End icon.
Select a design you like and click Update.
Click Back.
Use the slider under Duration to adjust the duration of the animation.
Hover your cursor over the icon in the panel to preview it.

Edit the button link

Click the Link icon
on the action bar.
Click the field under Choose a link.
Adjust the link and link type as needed.

Learn more about adding a link to an element .

A screenshot of the Customize Icon panel when customizing a button.

Tip:

Click the All design options icon

Wix Harmony Editor: Adding and Customizing Buttons

on the action bar to view even more design options for your button. Learn more about designing elements in your editor.

FAQs

Click a question below to learn more about adding and customizing buttons.

Can I change the button's background?

Absolutely, you can set a color or a gradient background to make your button more engaging and noticeable.

Click the All design options icon
on the action bar.
Select Button under Select a part.
Click Fill colors.
Click the color circle, then choose between a color or a gradient background.

What is the rel attribute in SEO settings when I'm adding a link to a button, and do I need it?

The rel attribute is used in links to inform search engines and browsers how to treat the link. It is an advanced setting that can impact your site's SEO if misused.

Learn more about adding link rel attributes.

What does linking a button to a popup do?

Linking an element to a popup allows you to draw attention to important content, such as announcements or promotions, when visitors interact with that element.

Learn more about adding and customizing popups.