Wix: Custom Buttons

How to customize buttons in Wix as well as save the style for use across the website:

As a Wix Designer, I often customize buttons on my clients' website designs. I wanted to share a couple ways to save your button designs, including a hidden way to apply your customized button design to other buttons.

How to save a button style in Wix: Option 1: Copy Design

To save a button design in Wix Classic Editor, right click on the button (control-click on Macs), then click Copy Design, and you can replace one of the themed buttons. Brilliant.

*IMPORTANT NOTE: You must use a Theme Button to override the Themed Buttons that can be found in the + Add tool. Many Wix themes/templates have buttons already in the layouts, but these buttons are often older, basic buttons rather than the Themed buttons. So, if you edit one of these older versions of buttons (they have less design options, see video above), then you can replace other similar buttons with the "Copy Design" option, but it won't replace the themed buttons that are available in the Themed Buttons under the + tool. I like to replace my themed buttons to make it easy to add new buttons across the site, and change all of their designs at once if desired.

Use Save to My Designs to save Wix buttons or other elements for future use anywhere desired.

How to save a button style in Wix: Option 2: My Designs

There is another way to save a button style in Wix, which is to save it under "My Designs" by control-clicking or right-clicking on the button and choosing "Save to My Designs" in the popup menu – however, this won't change any existing buttons using themed buttons, it just saves the specific button for reuse. This is still helpful as you can add the button to any areas or pages using your "My Designs" option under the + add tools.

Right-click the element(s) that you wish to save. Click Save to My Designs. (Optional) Enter a name for your design. Click Save.

*Note: I prefer using Themed Buttons rather than saved designs, as they are more widely available for use across the site. For example, when using Hoverboxes the rollover state does not allow you to choose from your "My Designs" items - so customizing Themed Buttons is a better bet if you want to be able to add consistent custom-designed buttons to Hoverboxes without extra work. Also, the "My Designs" option is great for those with just one Wix website, but for a Wix Designer like myself, it adds the saved element to my library along with all my other client websites, so it tends to get buried – I wish there was a way we could choose to save "My Designs" to just the one website if desired, so the My Designs doesn't get bogged down with hundreds of elements from various websites!

It is difficult to tell what is a basic button in Wix vs a Themed button, see my screenshots below to see the difference. Themed buttons have more design customization features including icons and layout.

Above: This is what a Themed Button Customization menu looks like, vs a basic older button shown below.

Above is a basic Wix button's customization window. This is not a "Themed Button" which has more customization features including icons.

General info on Customizing your Wix Buttons:

To customize any button so that you can apply it's design to other website buttons, click on the button, then click on the Paintbrush tool to edit the design. You can edit the regular and hover state of the button including background color & it's transparency, border, font choice, text color, and even add icons. Keep in mind that the Themed Buttons have more options than some of the basic buttons that you may find on a page template.

Once you've created a new button style that you want to use on other pages and areas of the website. Ideally, it would be good to save your new button design to the theme. It used to be that if you used a button a few times, Wix would automatically add this button design to your theme buttons. The Wix editor no longer does this, but there is a workaround when you use the "Copy Design" option in the menu of any button that can be accessed by control-click on a Mac or right-click on PCs. See above.

Happy Wixing!