How to change form buttons color?

My buttons are blue but I would like to custom match them to our logo and the form colors. I know you can enter Hex #s for the form itself, text, etc. but I can't figure out how to customize the the button with a hex color number!

Hi OurAmazingFighters,

Thank you for reaching out to Jotform Support. To confirm, you want to match the color of your form background to the next, back, and submit buttons? If so, you can achieve this by injecting custom CSS codes into your form. Let me show you how with the clone version of your most recent form:

button#form-pagebreak-next_34 {

    background-color: rgb(184, 221, 221)!important;

}

button#input_2 {

    background-color: rgb(184, 221, 221)!important;

}



button#form-pagebreak-back_34 {

    background-color: rgb(184, 221, 221);

}

1. In form builder, click on the blue roller paint icon.

2. Then click on Styles.

3. And scroll down to the CSS code text field and paste the code I provided.

If this is not the exact answer you are looking for, could you please elaborate more on your concern and provide us with the link to your form?

Give it a try and let us know if you need any help.

Hi! Unfortunately, that code only changed the first button, not the rest of them. Additionally, the page line and outline of the button didn't change either. Do you have an updated css code to fix these problems?

Hi there,

Thank you for getting back to us. Please replace the previously provided CSS code with the following to see if it meets your requirements.

/* Remove Page Line */ 

.form-pagebreak {

 border-top: none;

}



/* Change Next and Back Button Background Color */

.form-pagebreak-next-container > button, .form-pagebreak-back-container > button {

 background-color: #e55300; /* You can adjust the Hex number to your liking */

}

Give it a try and let us know if there's anything else we can do for you.

Hi! Is there an updated code for my other form the "2024 VA Overnight Experience: Family Information Form?" The code you originally gave me doesn't work. 

Hi OurAmazingFighters,

Thank you for reaching out to Jotform Support. To confirm, you would like to custom match the buttons colors with form logo and the form colors. If so, you can achieve this by injecting custom CSS codes into your form. I have tried to pull up the exact color as it's showing in your form logo to match. Let me show you how with the clone version of your most recent form:

First, copy this code:

/* Change Next and Back Button Background Color */

.form-pagebreak-next-container > button, .form-pagebreak-back-container > button {

 background-color: #dccb83; /* You can adjust the Hex number to your liking */

}

/* Change the button color when hover over */

.form-submit-button:hover{

  background-color: #00000 /* You can adjust the Hex number to your liking */

}

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.
3. Click on Save at the bottom of the Form Designer menu, and you’re done.
   
   I have cloned your form and here is how your page will look like after making the changes.
   
   

Feel free to change the color to any desired color of your choice. The following guide should help you how to inject custom CSS code in form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Give it a try and let us know how it goes.