Troubleshoot Composer: Button not working

If you've created a button but it doesn't function on the live site, or worse, doesn't look like a button at all, the most common reason is that you applied a button style without actually creating a link. The Styles dropdown shows you what buttons look like, but it doesn't create a working button. Use the Link modal to make the button functional.

💡 Quick answers

  • Why doesn't my button work? The most common reason is you used the Styles dropdown instead of the Link modal. The Styles dropdown only shows you what buttons look like; it doesn't create them.
  • How do I create a button that actually works? Highlight your button text, click the Link icon to open the Link modal, enter a URL, and use the "Class" dropdown to select your button style.
  • What's the difference between the Styles dropdown and the Link modal? Styles dropdown = viewing what's available. Link modal = actually creating the button.
  • My button looks right in Composer but doesn't work on the live site. It was likely created with the Styles dropdown instead of the Link modal. You'll need to recreate it properly.

In this article


This is the key to understanding why your button isn't working. These are two completely different tools with different purposes.

Styles dropdown (viewing only)

  • Purpose: Shows you what button styles are available on your site.
  • What it does: Displays a preview of button options so you can decide which style you want.
  • What it does NOT do: Does not create a working button. Does not add a link. Does not make text clickable.

Link modal (creating)

  • Purpose: Creates a functional link with button styling.
  • What it does: Opens when you click the Link icon. This is where you enter the URL and select the button style using the "Class" dropdown.
  • What it creates: A working, clickable button that links to your desired URL.

⚠️ The Styles dropdown will NOT create a button

If you click the Styles dropdown and select a button style, you may see the text change appearance in Composer, but it won't be a functional button on the live site. The text will just look styled — it won't be clickable. You MUST use the Link modal to create a working button.


Button looks styled but isn't clickable or functional

This is the classic sign that you used the Styles dropdown instead of the Link modal.

What happened

  • You selected text and used the Styles dropdown to apply button styling.
  • The text now looks like a button in Composer.
  • But the text has no link, so it's not clickable. It's just styled text.

Fix your button

  • Step 1: Select the button text. Highlight the entire button text that looks styled.
  • Step 2: Click the Link icon. Click the Link icon in the Composer toolbar to open the Link modal.
  • Step 3: Enter the URL. In the Link modal, enter the URL where the button should link.
  • Step 4: Select the button style from the Class dropdown. In the Link modal, use the "Class" dropdown to select your button style.
  • Step 5: Save and publish. Click Save to close the Link modal, save the Content element, and publish the page.

If your button is styled but you didn't assign a link destination, the button won't go anywhere when clicked.

Check your button link

  • Click the button text on the live site. If nothing happens or the page doesn't navigate, the button has no link.
  • In Composer, select the button text and click the Link icon. If the URL field is empty, the button has no destination.

Add destination

  • Step 1: Select the button text. Highlight the button.
  • Step 2: Click the Link icon. Open the Link modal.
  • Step 3: Enter the URL. Add the URL where the button should link.
  • Step 4: Save and publish. Click Save, save the Content element, and publish the page.

Test your button

Always test your buttons after publishing to ensure they work correctly.

  • Click the button on the live site. It should be visibly clickable and take you to the intended destination.
  • Check the hover state. Hover over the button — your cursor should change to a pointer, and the button should show a hover effect.
  • Verify the destination. Confirm the button takes you to the correct page or URL.
  • Test on mobile. Click the button on a mobile device to ensure it works on all screen sizes.

Fix a broken button

If you have a button that isn't working, follow these steps to rebuild it correctly:

  • Step 1: Edit the Content element. Open the page in Composer and click into the Content element containing the broken button.
  • Step 2: Select and delete the broken button. Highlight the button text and delete it.
  • Step 3: Type new button text. Enter the text you want the button to display.
  • Step 4: Highlight the text. Select all the button text.
  • Step 5: Click the Link icon. Open the Link modal.
  • Step 6: Enter URL and select button style. Add the link destination and use the Class dropdown to select the button style.
  • Step 7: Save and publish. Click Save, save the Content element, and publish the page. Test the button on the live site.

The Styles dropdown shows you button options. The Link modal creates a working button. If your button doesn't work, it was most likely created with the Styles dropdown instead of the Link modal. Recreate it using the Link modal with the Class dropdown.

Was this article helpful?
0 out of 1 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.