How to Add Wix Buttons: A Complete Guide
Buttons are one of the most powerful elements on any webpage. A well-designed button with compelling text directs visitors to take the actions that matter most to your business — booking an appointment, making a purchase, downloading a resource, or making an enquiry. This guide covers how to add, customise, link, and optimise buttons in Wix.
Step-by-Step: How to Add and Set Up a Button in Wix
Step 1: Add a Button to Your Page
Open your site in the Wix Editor. Click Add Elements (+) in the left panel, then select Button. Browse the available button styles (filled, outline, text-only, icon buttons, etc.) and click the one you want to add. The button will appear on your page and you can drag it to the desired position.
Step 2: Edit the Button Text
Double-click on the button to edit the text label. Use action-oriented, specific text that tells visitors exactly what will happen when they click. Examples: 'Book a Free Consultation', 'Get Started', 'Shop Now', 'Download the Guide', 'Contact Us Today'. Avoid vague text like 'Click Here' or 'Submit'.
Step 3: Set the Button Link
Click on the button and select Link (or the chain icon in the toolbar). Choose the destination: a page on your site, an external URL, an anchor, a lightbox, an email address, a phone number (initiates a call on mobile), or a downloadable file. For links leaving your site, tick 'Open in a new tab' to keep your site open.
Step 4: Customise the Button Design
Click on the button and select Design. Adjust: fill colour, text colour and font, border style, corner radius (rounded or square), shadow settings, button size, and hover state (how the button changes on hover). Use your primary brand colour as the fill and white text for strong contrast.
Step 5: Set Up the Hover State
In the button's Design panel, click the Hover tab. Set a slightly different fill colour (typically a darker or lighter shade) or add a subtle border change. This micro-interaction gives visitors visual feedback that the button is interactive and significantly improves the user experience.
Step 6: Position and Align the Button
Use the alignment tools in the Editor toolbar to centre, left-align, or right-align the button relative to other elements. For a hero section, centre the button beneath your headline. For a text+button layout, left-align to match the text. Consistent button placement across your site creates a professional, predictable experience.
Step 7: Check the Mobile Version
Switch to the Mobile Editor and verify the button displays correctly. Ensure it is large enough to tap comfortably (minimum 44x44 pixels), the text is fully visible, and the button is not obscured by other elements. Adjust size, position, and spacing as needed.
Step 8: Test and Publish
Use Preview mode to click the button and confirm it navigates to the correct destination. Check the hover state and mobile functionality. Once satisfied, click Publish.
SEO and Conversion Best Practices for Wix Buttons
Use a single primary call-to-action per section — too many competing buttons confuse visitors. Each section should have one dominant action. Use strong visual contrast for your CTA button so it stands out clearly from the page background. Position primary CTA buttons above the fold so they are visible without scrolling on desktop.
Common Mistakes to Avoid
Weak button text — Generic text like 'Submit' or 'Click Here' does not motivate action. Always use specific, benefit-focused text.
Buttons that blend in — If the button colour is too similar to the background, it will be overlooked. Always ensure strong visual contrast.
Buttons too small on mobile — Small buttons are difficult to tap on touchscreens. Make mobile buttons generously sized.
Broken or unset links — Always test every button link before publishing to prevent frustration and loss of trust.
Practical Tips and Advice
Use urgency in button text when appropriate — Phrases like 'Book Today', 'Limited Spaces', or 'Get Your Free Quote Now' can increase click-through rates by creating a sense of immediacy.
Keep button text short — Three to five words is ideal for most buttons. Longer text reduces visual impact and makes the button harder to read at a glance.
Use a sticky button for mobile — Consider adding a fixed 'floating' call-to-action button that remains visible as visitors scroll on mobile. This keeps your primary action accessible at all times.
Wix Buttons Checklist
☑ Button added to the correct position on the page
☑ Button text is specific and action-oriented
☑ Button link set to the correct destination
☑ External links open in a new tab
☑ Button design uses brand colours with strong text contrast
☑ Hover state configured for desktop
☑ Button is tap-friendly on mobile (min 44x44px)
☑ Button tested in Preview mode on desktop and mobile
☑ Site published after adding buttons
Frequently Asked Questions
1. Can I add a button that scrolls to a section on the same page?
Yes. Link a button to an anchor — a specific section of the same page. First add an anchor (Add Elements then Anchor), then set the button's link to that anchor. When clicked, the page will smoothly scroll to that section.
2. Can I make a button open a pop-up or lightbox?
Yes. When setting the button's link, choose Lightbox from the link options and select an existing lightbox on your site. When clicked, the lightbox opens as an overlay — useful for sign-up prompts, promotional offers, or embedded videos.
3. Can I add icons to Wix buttons?
Yes. Wix includes icon buttons and icon+text combination buttons. When adding a button, browse the Icon Button category for built-in icons. Alternatively, add a text button and place an icon element adjacent to it for a custom design.
4. Can I duplicate a button to use the same style elsewhere?
Yes. Right-click and select Duplicate (or Ctrl+D / Command+D) to create an exact copy including design settings. Update the text and link for each duplicate.
5. Can I make the button open the phone dialler on mobile?
Yes. Set the button link type to Phone and enter your number. When a mobile visitor taps the button, it will prompt them to call directly. This is ideal for service businesses wanting to make it as easy as possible for mobile visitors to get in touch.