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

SOLVE
Highlighted
Occasional Contributor

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!

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Advisor | Diamond Partner

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:

Unbenannt.PNG

 

best,

Anton








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

View solution in original post

6 Replies 6
Highlighted
Top Contributor | Diamond Partner

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. 

 

create-cta-advanced-options.png





Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
0 Upvotes
Highlighted
Occasional Contributor

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. 

Bildschirmfoto 2020-09-23 um 10.31.21.png

0 Upvotes
Highlighted
Solution
Advisor | Diamond Partner

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:

Unbenannt.PNG

 

best,

Anton








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

View solution in original post

Highlighted
Occasional Contributor

Hi Anton, 

 

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

 

Also @jonchim thank you!

 

Best regards

Karolina

0 Upvotes
Highlighted
Top Contributor | Diamond Partner

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. 





Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
Highlighted
Advisor | Diamond Partner

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








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