# How to style button **URL:** \ **Category:** CMS Development\ **Tags:** professional\ **Created:** [June 18, 2021, 11:36am UTC](https://community.hubspot.com/t/how-to-style-button/39161 "2021-06-18T11:36:00Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 18, 2021, 11:36am UTC](https://community.hubspot.com/t/how-to-style-button/39161/1 "2021-06-18T11:36:00Z")
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 ```lia-code-sample 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? ---
**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\ **Post date:** [June 18, 2021, 5:55pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/2 "2021-06-18T17:55:16Z")
@pablogt , any change you could show us a page with this form on it? @albertsg might be able to help with that additional information 😀 ---
**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\ **Post date:** [June 21, 2021, 9:49am UTC](https://community.hubspot.com/t/how-to-style-button/39161/3 "2021-06-21T09:49:26Z")
Hi @pablogt , Sometimes Hubspot default class removes the style. you can take the reference of parent class and add the style. > **[A Use Case for a Parent Selector | CSS-Tricks](https://css-tricks.com/a-use-case-for-a-parent-selector/)** > > Having a "parent selector" in CSS is mentioned regularly as something CSS could really use. I feel like I've had that thought plenty of times myself, but then Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards. ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 21, 2021, 10:02am UTC](https://community.hubspot.com/t/how-to-style-button/39161/4 "2021-06-21T10:02:01Z")
Hi all… Please see page here: [https://open2communications.com/contact/](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](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) I did not understand the solution… but I will look into it to analyse it in depth… thanks Pablo ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 22, 2021, 3:43pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/5 "2021-06-22T15:43:35Z")
[@webdew](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) 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 ```lia-code-sample input .hs-input { color: #FFFFFF!important; color: -internal-light-dark(black, white); } ``` … ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 22, 2021, 3:50pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/6 "2021-06-22T15:50:09Z")
Hi all, I used parent class with no change: ```lia-code-sample 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); } ``` ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 28, 2021, 12:53pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/7 "2021-06-28T12:53:34Z")
This did not work… What is the best way to style a form from hubspot? ---
**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\ **Post date:** [June 29, 2021, 2:48pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/8 "2021-06-29T14:48:08Z")
@pablogt , the link to your example page doesn’t work for me 😥. Could you post a new link? ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 29, 2021, 2:52pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/9 "2021-06-29T14:52:57Z")
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 [Contactez-nous | Agence Relation Presse Paris | Open2Europe](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 ---
**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\ **Post date:** [June 29, 2021, 3:07pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/10 "2021-06-29T15:07:11Z")
@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](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site) is a reference to the raw html option (it is far down on the page) ---
**Author:** ![pablogt](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/pablogt/32/89832_2.png) [@pablogt](https://community.hubspot.com/u/pablogt)\ **Post date:** [June 29, 2021, 4:20pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/11 "2021-06-29T16:20:28Z")
Ok, thank you… I will try that… and for the parents do I use this CSS? ```lia-code-sample 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); } ``` ---
**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\ **Post date:** [June 30, 2021, 3:18pm UTC](https://community.hubspot.com/t/how-to-style-button/39161/12 "2021-06-30T15:18:34Z")
@pablogt , make sure you add a **.** before your class names. eg **.hbspt-form**