> For the complete documentation index, see [llms.txt](https://docs.wavecast.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wavecast.io/emails/create-a-campaign/customise-email-ctas.md).

# Customise Email CTAs

### **Inserting a CTA Button**

<figure><img src="/files/3raSSqytQP0OlkX1kQIz" alt=""><figcaption></figcaption></figure>

To add an Email CTA, simply click the **Insert CTA** button in your editor's toolbar. The CTA will be placed wherever your cursor is positioned within the editor.

By default:

* If specific content is linked to the email, the CTA will display the text **"View event"** and use the `content_link_auto_login` as its link.
* If no content is linked, the CTA will default to the text **"View hub"** and use the fallback link `hub_link_auto_login`.

***

### **Interacting with a CTA**

<figure><img src="/files/dus0DpqcNb4srU2D1sZg" alt=""><figcaption></figcaption></figure>

When you insert a CTA using the toolbar, you can hover over the button or link to reveal five customization options. These options allow for easy editing and styling of the CTA:

* **Open Link**\
  Click this option to test and verify the link associated with the CTA. The link will open in a new tab or window.
* **Change Text Color**
  * Updates the text color of the CTA by adding inline styles to the closest anchor (`<a>`) element.
  * There’s no need to highlight the entire text—this option automatically applies the style to the relevant anchor.
* **Change Background Color**
  * Customizes the background color of the CTA.
  * Similar to changing the text color, this adds inline styling directly to the anchor (`<a>`) element, ensuring the change is localized to the CTA.
* **Edit Link**\
  Allows you to modify the URL or action associated with the CTA. This is useful for updating or correcting links.
* **Unlink**\
  Removes the link functionality from the CTA, effectively turning it into plain text or an unlinked button.

***

#### **Customizing Colors**

1. **Text Color**:\
   To change the text color of a CTA, hover over the CTA and select **Change Text Color**. This adds an inline `style` attribute to the closest `<a>` element. Example:

```
<a 
    href="[hub_link_auto_login]" 
    class="button button-blue" 
    target="_blank" 
    rel="noopener noreferrer" 
    style="color: rgb(0, 0, 0);">
        View hub
</a>
```

1. **Background Color**:\
   To change the background color, hover over the CTA and select **Change Background Color**. This modifies the inline `style` attribute of the anchor (`<a>`) element. Example:

```
<a 
    href="[hub_link_auto_login]" 
    class="button button-blue" 
    target="_blank" 
    rel="noopener noreferrer" 
    style="border-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);">
        View hub
    </a>
```

These changes are immediately visible in the editor and will render in the final email.

***

### **Best Practices**

1. **Use Meaningful Links**: Ensure that the CTA’s destination is clear and relevant to the email’s purpose.
2. **Contrast for Accessibility**: Choose text and background colors with sufficient contrast for readability, ensuring compliance with accessibility standards.
3. **Test Links**: Always use the **Open Link** option to confirm the CTA points to the correct URL.
4. **Avoid Over-Styling**: Use inline styles sparingly to maintain email performance and compatibility across email clients.