CMS Development

pablogt
Participant

How to style button

SOLVE

Hi,

 

I have a form in footer styled with hubspot and displayed on site via iframe.

How do I best style button... everything else is great...

When I used raw html I lost all styling...

I need to style button only

 

hs-button.large.primary { 
		background-color: #142263!important;
    border-width: 6px!important;
    border-color: #142263!important;
    border-radius: 30px!important;
    font-weight: bold!important;
    font-style: normal!important;
    text-transform: none!important;
    text-decoration: none!important;
    letter-spacing: 1px!important;
}

I have this code so far...

Any ideas? 

0 Upvotes
1 Accepted solution
pablogt
Solution
Participant

How to style button

SOLVE

Hi all,

 

I used parent class with no change:

hbspt-form hs_submit hs-submit hs-button { 
		background-color: #142263!important;
    border-width: 6px!important;
    border-color: #142263!important;
    border-radius: 30px!important;
    font-weight: bold!important;
    font-style: normal!important;
    text-transform: none!important;
    text-decoration: none!important;
    letter-spacing: 1px!important;
}


hbspt-form input .hs-input {
    color: #FFFFFF!important;
	  color: -internal-light-dark(black, white);
}

View solution in original post

11 Replies 11
pablogt
Participant

How to style button

SOLVE

This did not work...

What is the best way to style a form from hubspot?

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

How to style button

SOLVE

@pablogt , the link to your example page doesn't work for me 😥.  Could you post a new link?

0 Upvotes
pablogt
Participant

How to style button

SOLVE

Sure...

My footer had a blue background and we could not see the input text...

and finally I changed the button color with hubspot...

and since I had to go live with this version which I hope is temporary...

New url is https://open2europe.com/contact/

I need to change the radius of the button and the input color to go back to dark blue footer...

thank you for taking the time...

Pablo

dennisedson
HubSpot Product Team
HubSpot Product Team

How to style button

SOLVE

@pablogt 

Ok.  Looks like you are using the embed as an iframe option.  If you want full control over the styling, you will need to set the form to us raw html.  Then you will have complete control over the style.

Seeming this is live, I would clone it and add the clone to a test page and mess around.  You probably knew that already 🤣

On this page is a reference to the raw html option (it is far down on the page)

0 Upvotes
pablogt
Participant

How to style button

SOLVE

Ok, thank you... I will try that...

and for the parents do I use this CSS?

 

hbspt-form hs_submit hs-submit hs-button { 
		background-color: #142263!important;
    border-width: 6px!important;
    border-color: #142263!important;
    border-radius: 30px!important;
    font-weight: bold!important;
    font-style: normal!important;
    text-transform: none!important;
    text-decoration: none!important;
    letter-spacing: 1px!important;
}


hbspt-form input .hs-input {
    color: #FFFFFF!important;
	  color: -internal-light-dark(black, white);
}
0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

How to style button

SOLVE

@pablogt , make sure you add a . before your class names.  eg .hbspt-form

0 Upvotes
pablogt
Solution
Participant

How to style button

SOLVE

Hi all,

 

I used parent class with no change:

hbspt-form hs_submit hs-submit hs-button { 
		background-color: #142263!important;
    border-width: 6px!important;
    border-color: #142263!important;
    border-radius: 30px!important;
    font-weight: bold!important;
    font-style: normal!important;
    text-transform: none!important;
    text-decoration: none!important;
    letter-spacing: 1px!important;
}


hbspt-form input .hs-input {
    color: #FFFFFF!important;
	  color: -internal-light-dark(black, white);
}
pablogt
Participant

How to style button

SOLVE

@webdew I tried this with no luck... in fact not sure which is the parent...

I find myself with smae problem with input text color ... I have the right code but does nothing...

Not sure what to do...

Please help

input .hs-input {
    color: #FFFFFF!important;
    color: -internal-light-dark(black, white);
}

... 

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

How to style button

SOLVE

Hi @pablogt ,

Sometimes Hubspot default class removes the style. you can take the reference of parent class and add the style.
https://css-tricks.com/a-use-case-for-a-parent-selector/

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
pablogt
Participant

How to style button

SOLVE

Hi all...

Please see page here: https://open2communications.com/contact/

I have 3 buttons... too many I think but all are different... I need to change the two hubspot buttons.

@webdew I did not understand the solution... but I will look into it to analyse it in depth...

thanks

 

Pablo

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

How to style button

SOLVE

@pablogt , any change you could show us a page with this form on it? 

@albertsg might be able to help with that additional information 😀

0 Upvotes