How to Add Custom Styles to Hubspot CTAs

Customizing call-to-action (CTA) elements in Hubspot lets you match your brand, control layout, and optimize conversions without being limited to default styles. This guide explains how to add bespoke CSS to your button and image CTAs using Embed code and tracking script options.

Understanding Hubspot CTA Styling Options

Before you write any CSS, it helps to understand how Hubspot renders CTAs on your pages and emails. Each method of adding a CTA gives you different levels of control over styling.

Tracking script: Loads CTAs dynamically and applies styles from your site’s CSS or connected stylesheets.
Embed code: Outputs static HTML you can target precisely with CSS.
Hubspot content editors: Let you insert CTAs and apply additional classes in modules or rich text areas.

Choosing the right method depends on where the CTA appears and how much control you need over the final design.

When to Use Embed Code vs Tracking Script in Hubspot

Hubspot CTAs can be inserted using either Embed code or the tracking script. Each option affects how you write and apply custom styles.

Using Embed Code for Fine-Grained Hubspot CTA Control

The Embed code method is ideal when you want tight control over an individual CTA’s markup and styling.

Best for:

Landing pages with tailored layouts
Single-page tests where you want to isolate one CTA style
Developers who prefer working directly with HTML and CSS

When you use Embed code, Hubspot renders the CTA as standard HTML. You can then write CSS rules targeting IDs or classes in that snippet to create custom button shapes, hover effects, or typography.

Using the Hubspot Tracking Script for Sitewide CTA Styling

The tracking script is best when you want your Hubspot CTAs styled consistently across your website.

Best for:

Global header or footer CTAs
Sitewide promotional CTAs
Blogs or content-heavy pages using templates

With the tracking script, CTAs are loaded asynchronously into your page. Your theme stylesheets or global CSS can target the CTA container and elements, so all instances follow the same visual system.

Steps to Style Hubspot Button CTAs

Button CTAs are the most common type of conversion element in Hubspot. Use these steps to customize font, color, borders, and hover states.

1. Insert the Hubspot CTA

Navigate to Marketing > Lead Capture > CTAs in your Hubspot account.
Create or edit a button-style CTA.
Choose where it will be used: website page, landing page, blog, or external site.
Select either the Embed code or ensure your page contains the Hubspot tracking script.

Copy the Embed code if you plan to paste it into a custom template or non-Hubspot page.

2. Inspect the Hubspot CTA Markup

Place the CTA on a test page, then use your browser’s developer tools to inspect the rendered HTML. Hubspot typically outputs:

A wrapper element with a unique ID or class
An anchor tag acting as the button
Optional inline styles applied by the CTA tool

Make note of unique selectors you can safely target without affecting other components.

3. Write Custom CSS for the Button

In your stylesheet or Hubspot design tools, add rules that target the CTA wrapper and button element. Common customizations include:

Background color and gradients
Font family, weight, and letter spacing
Border radius for rounded corners or pill shapes
Box-shadow for depth
Hover effects, such as color transitions or scale

Ensure your CSS loads after any default Hubspot styles so your rules take precedence.

4. Apply Styles in Hubspot Templates or External Pages

If you are using Hubspot CMS, open your template or theme:

Add a <style> block or reference a custom CSS file in the template head.
Paste your CSS rules that target the CTA.
Publish your template and review a live page to confirm changes.

On external sites, place your CSS in the main stylesheet or a dedicated CTA stylesheet that loads after the Hubspot tracking script or Embed code.

How to Style Hubspot Image CTAs

Image CTAs in Hubspot behave differently from button CTAs because the visual design is baked into the image itself.

Key principle: You cannot directly change the design of the image using CSS, but you can style how the image is displayed.

Styling Options for Hubspot Image CTAs

Use CSS to adjust:

Image size and responsive behavior
Padding and margins around the CTA
Alignment (left, center, right)
Borders, border radius, and shadows
Container background color or gradients

Place your CSS rules in the same way as with button CTAs, targeting the specific wrapper and image element rendered by Hubspot.

Resizing and Aligning Image CTAs in Hubspot Editors

If you insert an image CTA into a rich text module in a Hubspot email or page editor, you can also:

Select the CTA image and drag to resize, or use width settings where available.
Apply alignment options directly within the content editor toolbar.
Combine editor adjustments with CSS for fine-tuned control.

This is useful when you need a quick layout tweak without editing templates or theme files.

Best Practices for Custom Hubspot CTA Styles

Well-structured styles will keep your Hubspot CTAs maintainable and consistent.

Keep Hubspot CTA CSS Modular

Create dedicated classes for CTA variants, such as primary, secondary, or outline styles.
Apply these classes within modules or custom HTML where you embed the CTA.
Avoid over-targeting generic tags so you do not unintentionally affect non-CTA buttons.

Test Hubspot CTAs Across Devices and Browsers

Preview CTAs on desktop, tablet, and mobile within Hubspot preview tools.
Check various browsers to ensure transitions, shadows, and layout behave consistently.
Confirm that hover states degrade gracefully on touch devices.

Maintain Accessibility in Hubspot CTA Designs

Ensure text color contrasts strongly with the background.
Keep focus outlines visible for keyboard users.
Use clear, descriptive CTA copy so links remain understandable by screen readers.

Helpful Resources for Advanced Hubspot Styling

If you need more in-depth technical detail, refer to official documentation and expert guidance.

Official guide to CTA styling and behavior in Hubspot: Add custom styles to my CTA
Strategic consulting and implementation tips: Consultevo

Combining accurate technical implementation with strong design will help your Hubspot CTAs perform better and align with your overall brand standards.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`

Hupspot CTA Custom Style Guide