How does the design of a HubSpot-created CTA adapt to my Corporate Design? CSS-Code already inserted

[karolinadiev]

Hello Support-Team,

I am Karolina from Germany and I have a question regarding CTA's:

I have built some CTA's in HubSpot. I want to insert them into our Website: leadtributor.com. It is very important that they have our Corporate Design. To adapt our design, I inserted our CSS-Code in HubSpot CTA's (creating the CTA's).

When I insert the CTAs in our website, the design does NOT adapt (though I inserted the CSS-Code). 

How do I manage that the design of the HubSpot CTA adapts?

Thanks for your time!

[Anton]

Hi @karolinadiev, 

the best solution would be to:

- create a style in the CSS

- set the cta-default-styling to "simple link"

- add a CSS class

it could look like this(I've took some stylings from your page):

a.my-custom-pink-cta{
box-shadow: 0 0 0 rgba(24,24,24,.3);
background-color: rgba(184, 51, 204, 0.7);
color: #ffffff;
border-radius: 4px;
padding: .1em 1em;
}

a.my-custom-pink-cta:hover{
background-color: rgba(184, 51, 204, 1);}

a.my-custom-black-cta{
box-shadow: 0 0 0 rgba(24,24,24,.3);
background-color: #181818;
color: #ffffff;
}

a.my-custom-black-cta:hover{
background: #323232;
}

you'll need to add the animations.

Also: you should add your custom CTA styles at the very bottom of your CSS. Maybe you'll need to use !important.

best, 

Anton

[jonchim]

Hi @karolinadiev,

If you inserted your css code into the custom css field below, some styles may need !important if it's being overridden ny other styles. I would try adding the name of the class of the buttons on the corporate site to the Custom CSS class field to see if the styles adapt. Let me know if that doesn't work and feel free to take a screenshot of your CTA css settings so I can take a look. 

[karolinadiev]

Hi Jon,

thank you for your reply.

Unfortunately it didnt work. I added my CSS Settings here, maybe this will help you.

Also: is there any chance to change the font? I sent the HubSpot button code to our website hoster, he can change the rounding of the button and change what happens when hovering over it.

As the code is more of an "Image", he is not able to change the "inner" components of the button such as font, text etc. Can that be changed somehow? 

Thanks for your time!

The CSS Code: 

<style>
.bt_bb_button {
margin-right: 1.25rem;
margin-left: 0;
font-weight: 700;
font-size: 1.25em;
display: inline-block;
}

.bt_bb_button a ,
.bt_bb_button a:hover {
box-shadow: 0 3px 10px rgba(24,24,24,.3);
background-color: #181818;
color: #ffffff;
}
.bt_bb_button a:hover {
text-shadow: 0 1px 2px rgba(24,24,24,.3);
background: #323232 !important;
}
.bt_bb_button .bt_bb_button_text {
font-family: Dosis;
}
.bt_bb_button a {
border-radius: 50px;
padding: 1.25em 2.1875em;
text-decoration: none;
position: relative;
overflow: hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 1em 3em;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;

}
.bt_bb_button a:before
{
display: block;
content: "";
top: 0;
bottom: 0;
position: absolute;
width: 50px;
left: -60px;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: 350ms ease all;
-moz-transition: 350ms ease all;
transition: 350ms ease all;
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
-webkit-transition: 0ms ease all;
-moz-transition: 0ms ease all;
transition: 0ms ease all;
opacity: .5;
}
.bt_bb_button a:hover:before {
left: 110%;
-webkit-transition: 800ms ease all;
-moz-transition: 800ms ease all;
transition: 800ms ease all;
opacity: .2;
}

</style>

"Erweitere Optionen" means advanced Options. 

[jonchim]

Hey @karolinadiev,

Thank you for providing this additional information!

@Anton has a great write up below that should resolve the issue regarding your CTA styling. 

[Anton · Accepted solution]

Hi @karolinadiev, 

you have to modify the CSS. Currently you assigning the styling to a-tags in the wrapping-container" with the class "bt_bb_button". HubSpots CTAs assign their classes directly to the a-tag. 

This means that you should change the CSS to

a.bt_bb_button {
margin-right: 1.25rem;
margin-left: 0;
font-weight: 700;
font-size: 1.25em;
display: inline-block;
}

a.bt_bb_button,
a.bt_bb_button:hover {
box-shadow: 0 3px 10px rgba(24,24,24,.3);
background-color: #181818;
color: #ffffff;
}
a.bt_bb_button:hover {
text-shadow: 0 1px 2px rgba(24,24,24,.3);
background: #323232 !important;
}
a.bt_bb_button{
font-family: Dosis;
}
a.bt_bb_button{
border-radius: 50px;
padding: 1.25em 2.1875em;
text-decoration: none;
position: relative;
overflow: hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
text-decoration: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 1em 3em;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
transition: all 300ms ease;

}
a.bt_bb_button:before
{
display: block;
content: "";
top: 0;
bottom: 0;
position: absolute;
width: 50px;
left: -60px;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
transform: skewX(-20deg);
-webkit-transition: 350ms ease all;
-moz-transition: 350ms ease all;
transition: 350ms ease all;
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
-webkit-transition: 0ms ease all;
-moz-transition: 0ms ease all;
transition: 0ms ease all;
opacity: .5;
}
a.bt_bb_button:hover:before {
left: 110%;
-webkit-transition: 800ms ease all;
-moz-transition: 800ms ease all;
transition: 800ms ease all;
opacity: .2;
}

 and assign only the class to the CTA.

It should look like this:

best,

Anton

[karolinadiev]

Hi Anton, 

thank you very much for your help! It worked perfectly. 

Also @jonchim thank you!

Best regards

Karolina