---
title: How do I style a Call-to-Action (CTA) button?
description: Use your theme's button styling to automatically style a CTA button in HubSpot.
---

[Skip to content](https://www.stephanieogaygarcia.com/docs/how-do-i-style-a-cta-button#main-content)

[![Stephanie O'Gay Garcia](https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg "Stephanie O'Gay Garcia")](https://www.stephanieogaygarcia.com)

- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)

- [About](https://www.stephanieogaygarcia.com/about)
- [Services](https://www.stephanieogaygarcia.com/services)
- [Products](https://www.stephanieogaygarcia.com/shop)
- [Work](https://www.stephanieogaygarcia.com/portfolio-work)
- [Blog](https://www.stephanieogaygarcia.com/hubspot-website-development)
- [Contact](https://www.stephanieogaygarcia.com/contact)

[![Contact](https://no-cache.hubspot.com/cta/default/1951013/b0a6fb90-0816-419f-8904-206f7912a6f2.png)](https://cta-redirect.hubspot.com/cta/redirect/1951013/b0a6fb90-0816-419f-8904-206f7912a6f2)

Hamburger Menu

- [Documentation](https://www.stephanieogaygarcia.com/docs)
- How do I style a Call-to-Action (CTA) button?

# How do I style a Call-to-Action (CTA) button?

**First published:**  November 16, 2022  | **Last updated:**  December 4, 2022

## Styling CTA buttons

When you create [a Call-to-Action (CTA) button](https://knowledge.hubspot.com/ctas/create-calls-to-action-ctas) in HubSpot you are given a number of styling options to customize that button:

![cta-default-button-styling (1)](https://www.stephanieogaygarcia.com/hs-fs/hubfs/docs/cta-default-button-styling%20(1).png?width=400&height=421&name=cta-default-button-styling%20(1).png)

Using these options is perfectly fine but comes with it's own issues:

- You need to manually style the button every time
- It might not be fully in keeping with your brand
- If you update your website's styling, you'll need to manually update every CTA you've created

 

## Using your theme's primary/default button styling for CTA buttons

A better solution is to take advantage of your theme's styling instead. Every theme I build has a basic "button" CSS class which pulls in the styling that you've set from [your theme's settings](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings).

To use this class on your CTA:

1. Set the "Button style" dropdown to "Link (No Style)":
   
   ![cta-no-styling](https://www.stephanieogaygarcia.com/hs-fs/hubfs/docs/cta-no-styling.png?width=400&height=266&name=cta-no-styling.png)
2. Click into "Advanced Options" below
3. Within Advanced Options, you'll find the "Custom CSS class" option, enter "button" into this field:
   
   ![cta-custom-css-class](https://www.stephanieogaygarcia.com/hs-fs/hubfs/docs/cta-custom-css-class.png?width=400&height=143&name=cta-custom-css-class.png)

And that's it! When you use this CTA in a page, it should automatically display your theme's primary/default button styling.

Note that sometimes HubSpot doesn't display this styling within the page editor, but if you preview or publish the page you will be able to see your styled button.

 

### Using your theme's other button styling

This section will vary a lot depending on your individual theme, as I tend to do this differently from one theme to another. However, aside from the default "button" CSS class used in the previous section, I'll often create other button styling options. So you may have something like a "button--secondary" CSS class available to you.

When you have additional CSS classes you can add those to the "Custom CSS class" field from step 3 above, so that it looks something like:

Each CSS class should be separated by a space, so you might have something like "button button---secondary button--outline" for an outlined button in your theme's secondary colour.

![cta-custom-css-class-multiple](https://www.stephanieogaygarcia.com/hs-fs/hubfs/docs/cta-custom-css-class-multiple.png?width=400&height=146&name=cta-custom-css-class-multiple.png)

 

 

Contact me at [stephanie@stephanieogaygarcia.com](mailto:stephanie@stephanieogaygarcia.com) if you're uncertain about your theme's button styling options.

### Applies to:

All themes

### Tags

[#buttons](https://www.stephanieogaygarcia.com/docs/tag/buttons) [#ctas](https://www.stephanieogaygarcia.com/docs/tag/ctas) [#applies-to--all-themes](https://www.stephanieogaygarcia.com/docs/tag/applies-to-all-themes)

This documentation is for HubSpot themes created by Stephanie O'Gay Garcia

If you still have questions, email me at [stephanie@stephanieogaygarcia.com](mailto:stephanie@stephanieogaygarcia.com)

![Hello Icon](https://www.stephanieogaygarcia.com/hubfs/Website%20Imagery/hand-drawn-hello.svg)

#### Contact Me

I'd love to hear more about your project! Send me a message through my contact form below.

[![Contact me](https://no-cache.hubspot.com/cta/default/1951013/43e726b9-6a47-40bc-b8d8-f23abb524a90.png)](https://cta-redirect.hubspot.com/cta/redirect/1951013/43e726b9-6a47-40bc-b8d8-f23abb524a90)

###### Services

- [HubSpot Website Development](https://www.stephanieogaygarcia.com/services/hubspot-website-development)
- [HubSpot CMS Technical Support](https://www.stephanieogaygarcia.com/services/hubspot-cms-technical-support)
- [Custom HubSpot CMS Hub Themes](https://www.stephanieogaygarcia.com/custom-hubspot-cms-hub-themes)

###### Stephanie O'Gay Garcia

- [About](https://www.stephanieogaygarcia.com/about)
- [Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service)
- [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use)
- [Privacy](https://www.stephanieogaygarcia.com/privacy-policy)

###### Social

[See my LinkedIn Profile ](https://www.linkedin.com/in/stephanieogaygarcia/) [Follow us on Facebook ](https://www.instagram.com/stephanieogaygarcia/) [Follow us on Facebook ](https://www.facebook.com/stephanieogaygarcia)

###### Search

This is a search field with an auto-suggest feature attached.

- There are no suggestions because the search field is empty.

###### Latest Articles

- [How to add an llms.txt page to your HubSpot website](https://www.stephanieogaygarcia.com/hubspot-website-development/add-an-llmstxt-page-to-your-hubspot-website)
- [Switch an existing HubSpot custom module from global to local](https://www.stephanieogaygarcia.com/hubspot-website-development/switch-an-existing-hubspot-custom-module-from-global-to-local)
- [Overriding HubSpot's new forms styling from theme settings](https://www.stephanieogaygarcia.com/hubspot-website-development/overriding-hubspots-new-forms-styling-from-theme-settings)

Copyright © 2026 Stephanie O'Gay Garcia - Freelance HubSpot CMS Theme Developer based in Toronto, ON, Canada | [Terms of Service](https://www.stephanieogaygarcia.com/terms-of-service) | [Website Terms of Use](https://www.stephanieogaygarcia.com/website-terms-of-use) | [Privacy](https://www.stephanieogaygarcia.com/privacy-policy)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Stephanie O'Gay Garcia",
    "url" : "https://www.stephanieogaygarcia.com/docs/author/stephanie-ogay-garcia"
  },
  "dateModified" : "2022-12-04T03:29:23.358Z",
  "datePublished" : "2022-11-16T18:10:44.000Z",
  "headline" : "How do I style a Call-to-Action (CTA) button?",
  "mainEntityOfPage" : {
    "@id" : "https://www.stephanieogaygarcia.com/docs/how-do-i-style-a-cta-button",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.stephanieogaygarcia.com/hubfs/Logos/stephanieogaygarcia_logo.svg"
    }
  }
}
```