# Button Element in Email Builder > The Button Element allows you to add clickable buttons to your email templates, helping you drive engagement through clear and visually appealing calls… - Source: https://docs.ghlcustomercare.com/docs/marketing/email-builder-capabilities/button-element-in-email-builder - Section: Marketing / Email Builder Capabilities - Reading time: 2 min - Images: 5, each explained below --- The Button Element allows you to add clickable buttons to your email templates, helping you drive engagement through clear and visually appealing calls to action (CTAs). You can fully customise the button’s text, colour, size, and link destination to match your email design and brand style. --- **TABLE OF CONTENTS** - [What is the Button Element in Email Builder?](#what-is-the-button-element-in-email-builder) - [Key Benefits of the Button Element](#key-benefits-of-the-button-element) - [How To Setup the Button Element](#how-to-setup-the-button-element) - [Frequently Asked Questions](#frequently-asked-questions) --- ## **What is the Button Element in Email Builder?** The Button Element is a drag-and-drop block that lets you insert a fully customisable CTA button into your email layout. You can adjust its design, alignment, and link destination to fit your goals such as directing recipients to a landing page, product page, or event registration. Buttons are essential for guiding user actions and improving click-through rates. With this element, you can style them to stand out while maintaining a consistent look across all devices. > **Note:** Buttons are built using HTML and render reliably in most email clients. Always preview your design on both desktop and mobile to ensure proper display. --- ## **Key Benefits of the Button Element** Adding the Button Element to your email design provides several benefits: - Create clear and effective calls to action with ease. - Customise button text, colour, and size to match your design theme. - Add links to direct users to specific pages or actions. - Align and space buttons precisely for visual balance. - Automatically responsive across mobile and desktop devices. --- ## **How To Setup the Button Element** Follow these steps to add and configure the Button Element in your email template: 1. Navigate to **Marketing → Emails → Templates** from your sub-account dashboard. ![Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291260/original/1f-e9HKDiWzRQTo2Us0e6x8K72CPFJX2zA.png) **Step 1 of 8: Navigate to Marketing → Emails → Templates from your sub-account…** This screenshot accompanies step 1 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you navigate to Marketing → Emails → Templates from your sub-account dashboard. The next step is to open an existing email template or click the + New button to create one. - Where to go: Navigate to Marketing → Emails → Templates from your sub-account dashboard. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Button Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Open an existing email template or click the + New button to create one. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. <- this image 2. Open an existing email template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Button Element under the Elements section. 5. Drag and drop the Button Element into your desired position in the layout. 6. Click on the Button Element to open the Edit tab on the left panel. Here you can: 7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. 8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. 2. Open an existing email template or click the **\+ New** button to create one. ![Step 2 of 8: Open an existing email template or click the + New button to create one](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291290/original/7j2FCVwZ0mtT27Epo-p8XQj1MHzBLvoStQ.jpeg) **Step 2 of 8: Open an existing email template or click the + New button to create one** This screenshot accompanies step 2 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you open an existing email template or click the + New button to create one. The next step is to in the Email Builder, click the Add Elements (+) icon in the left sidebar. - Where to go: Open an existing email template or click the + New button to create one. - Controls: + New, Marketing → Emails → Templates, Email Builder, Add Elements (+), Button Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: In the Email Builder, click the Add Elements (+) icon in the left sidebar. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing email template or click the + New button to create one. <- this image 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Button Element under the Elements section. 5. Drag and drop the Button Element into your desired position in the layout. 6. Click on the Button Element to open the Edit tab on the left panel. Here you can: 7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. 8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. 3. In the **Email Builder**, click the **Add Elements (+)** icon in the left sidebar. ![Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291114/original/PFr33EZ0nJkTqlMdEUXDYMpGFwPqrdqQng.png) **Step 3 of 8: In the Email Builder, click the Add Elements (+) icon in the left…** This screenshot accompanies step 3 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you in the Email Builder, click the Add Elements (+) icon in the left sidebar. The next step is to locate the Button Element under the Elements section. - Where to go: In the Email Builder, click the Add Elements (+) icon in the left sidebar. - Controls: Email Builder, Add Elements (+), Marketing → Emails → Templates, + New, Button Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile - Next: Locate the Button Element under the Elements section. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing email template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. <- this image 4. Locate the Button Element under the Elements section. 5. Drag and drop the Button Element into your desired position in the layout. 6. Click on the Button Element to open the Edit tab on the left panel. Here you can: 7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. 8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. 4. Locate the **Button Element** under the **Elements** section. 5. Drag and drop the Button Element into your desired position in the layout. 6. Click on the **Button Element** to open the **Edit** tab on the left panel. Here you can: - **Edit Button Text:** Change the label to reflect your desired action (e.g., _Shop Now_, _Learn More_, _Book a Call_). - **Add a Link:** Enter the destination URL where the button should redirect users. - **Customize Styling:** Adjust button color, text color, font, border radius, and background. - **Adjust Size and Alignment:** Control width, padding, and alignment (left, center, or right). - **Add Padding:** Add space around the button for layout balance. ![Step 5 of 5: Add Padding: Add space around the button for layout balance](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291199/original/2gmr7xIiYOo612B-FsjiigGgMh6VyOnQ4w.png) **Step 5 of 5: Add Padding: Add space around the button for layout balance** This screenshot accompanies step 5 of 5 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you add Padding: Add space around the button for layout balance. - What this covers: Add Padding: Add space around the button for layout balance. - Controls: Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Button Element, Elements, Edit, Visibility, Device-Based Visibility, Conditional Sending, desktop, mobile Full procedure: 1. Edit Button Text: Change the label to reflect your desired action (e.g., Shop Now, Learn More, Book a Call). 2. Add a Link: Enter the destination URL where the button should redirect users. 3. Customize Styling: Adjust button color, text color, font, border radius, and background. 4. Adjust Size and Alignment: Control width, padding, and alignment (left, center, or right). 5. Add Padding: Add space around the button for layout balance. <- this image 7. Click the **Visibility** tab to configure **Device-Based Visibility** or **Conditional Sending** options. ![Step 7 of 8: Click the Visibility tab to configure Device-Based Visibility or…](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057291234/original/LIvSVN0vdnZIe_SBI6qwi-KR12f9f5XMsA.png) **Step 7 of 8: Click the Visibility tab to configure Device-Based Visibility or…** This screenshot accompanies step 7 of 8 in the "How To Setup the Button Element" section of "Button Element in Email Builder". At this point in the walkthrough you click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. The next step is to preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. - What to click: Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. - Controls: Visibility, Device-Based Visibility, Conditional Sending, Marketing → Emails → Templates, + New, Email Builder, Add Elements (+), Button Element, Elements, Edit, desktop, mobile - Next: Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. Full procedure: 1. Navigate to Marketing → Emails → Templates from your sub-account dashboard. 2. Open an existing email template or click the + New button to create one. 3. In the Email Builder, click the Add Elements (+) icon in the left sidebar. 4. Locate the Button Element under the Elements section. 5. Drag and drop the Button Element into your desired position in the layout. 6. Click on the Button Element to open the Edit tab on the left panel. Here you can: 7. Click the Visibility tab to configure Device-Based Visibility or Conditional Sending options. <- this image 8. Preview your email in both desktop and mobile modes to ensure the button looks and functions correctly. 8. Preview your email in both **desktop** and **mobile** modes to ensure the button looks and functions correctly. --- ## **Frequently Asked Questions** **Q: Can I add multiple buttons in one email?** Yes, you can add as many Button Elements as you need. Each one can have unique styling and links. **Q: How do I make a button full-width?** Use the full width toggle in the edit panel to set the button to 100% or manually adjust it using padding and alignment controls. **Q: Are buttons mobile responsive?** Yes, buttons automatically resize and reposition for optimal display on mobile devices. **Q: How do I remove a button from my layout?** Select the Button Element and click the trash/delete icon to remove it from your email design. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com