Custom CTA won't save

[penguinMarket]

Hey all,

I'm having this issue with customizing CTA's for the first time. Everytime I've customized a CTA I have not had an issue with saving it in HubSpot. I tried to make a new 'book now' button with custom HTML, visually it was perfect but HubSpot will not process and save it. Has anyone else run into this issue before? Is there a max-width for CTA's? That is the only issue I could think of on my end.

[Anton · Accepted solution]

Hi @penguinMarket,

how exactly do you customize the CTA?

Inside the "CTA-Area" or via CSS?

If you customize it in the CTA-Area I would recommend you to move your styling to the main CSS file. 

Example(inputs in the "custom css" area of the CTA button;I've just wrote something down)

background-color: #fafafa;
color:#333;
border:1px solid #fff;

if this doesn't get saved or don't work - there are a few options what could be the problem:

1. you main CSS file has, like nearly every HubSpot CSS file some (basic)styling for CTA-buttons and "overwrites" your custom styling

2.  your code has invalid inputs and HubSpot deletes it

3. you have selected "simple"(or something else) as "button-style". For best results you should try to change it to "link(no style)" and enter all your custom CSS below. 

...

Personally I would never style (every) CTA-button with custom CSS inside the button creation.

The "best-case" (imo) is:

- open your main css file (or the one which is used by the template)

- create a new class like ".my-nice-looking-cta-button"

- assign all of your custom css code to this class

- save the CSS file

- assign the class to your CTA-button

with this method you have not to style every CTA-button again and again. 

If we take the example code from above it would look like this with the "class-solution"

CSS:

.my-fancy-cta-button{
background:#fafafa;
color:#333;
border:1px solid #fff;
}

"CTA-area":

- enter "my-fancy-cta-button" as custom CSS-class in the CTA-button options

Also - if you open "advanced options" in the CTA creation view and check/select the auto-size option, the CTA will be always as width as possible(if there is no max-width in the CSS)

Hope this helps.

If you need fourther help, I can help you.

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[penguinMarket]

Hi Anton,

Yes, I usually link to my main CSS file when I make CTA's but this is an individual for something independent. 

I figured if you saw the code it might help so here is a screenshot. 

Thanks!!!