Studio Editor: Adding and Customizing Buttons
Buttons are a great way to encourage visitors to engage with a site. In the Studio Editor, you can add regular or animated buttons, and choose what they show (text, an icon, or both). There are also a ton of design and layout options, giving you full creative control.
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?
Old (basic) buttons display only text, and styled buttons can display both text and icons. You can check which you have by clicking the button in your editor:
Basic buttons: The Change Text option is displayed.
Styled buttons: The Settings option is displayed.
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 at any point (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.
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:
Select a link type on the left.
Add the relevant link information.
Click Done.
Accessible name: Describe the button's function to visitors using assistive technologies.
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.
To customize a styled button:
Select the relevant button.
Choose what you want to customize:
Add icon animations
Bring the extra wow-factor to your client's site by adding an animation effect your button icon. Choose a pre-designed option from Wix for fast editing, or create a personal touch with your own custom icons.
Click Settings.
Click Animated under Icon type.
Choose the animation you want to apply, and set it up:
Predesigned animations: Select from a variety of animated icons from Wix, and adjust the duration using the slider.
Custom animations: Upload your own files, or combine them with icons from Wix for a custom effect.
Design the button
You can tailor the design of a styled button for 2 different states: Regular or Hover. Change settings like the background, border, or the shape of the button's corners.
Click the Open Inspector icon
at the top right of the editor.
Scroll down to Design.
Select the relevant state: Regular or Hover.
Customize the button using the available options:
Background Fills: Choose a color, gradient or image for the button's background.
Text: Adjust the font, formatting and spacing of the button text. You can also click Apply text shadow to add shadow to the text.
Borders: Choose a color / gradient for the borders and set the thickness in px. You can apply the same design to all sides, or click the Unlock icon
to customize them separately.
Corners: Make the corners more round or square by changing the radius in px. You can set the same radius for all corners or click the Unlock icon
to customize them separately.
Shadows: Add inner / outer shadow, or multiple layers of shadow, while setting the color, angle, distance, size, etc.
Layout: Choose what to show on the button (text, icon or both) and how these should be arranged and aligned.
Icon: Adjust the color, size and angle of the icon that appears on the button.
Adjust the button's layout
Change the button's alignment, positioning and spacing so the text and / or icon look exactly how you want.
Click the Layout icon
.
Adjust any of the following settings:
Choose what displays: Decide what is displayed on the button: Text and icon, Text only, Icon only, or Nothing.
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.
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 selecting Justify
.
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).
Direction: Choose whether the button content reads left-to-right, or right-to-left.
