Need help to custom css a button

  • debfox
    Asked on June 28, 2019 at 6:00 PM

    https://form.jotform.com/91324501090142

    Hi, I want to make our button match the other buttons on our website better. It looks exactly right at a first glance, but when I hover to click, it turns gray. Is there a way to customize what the button looks like when you hover over it?

    when I hover over the button, I want the background on the button to turn the same blue as the border color, and the text to turn white

    Edit to original post:

    I receive help from Jotform support, this is what I was provided: 

    you can try injecting this CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-submit-button:hover{

        background: "your color" !Important;

    }

    Example:

    .form-submit-button:hover{

        background: red !Important;

    }

     

    however, this did not make the text white, and I couldn't insert a hex code for my color. I have access to the rgb and hsl color codes as well. 

  • David JotForm Support Manager
    Replied on June 28, 2019 at 6:33 PM

    Yes there is, you can try injecting this CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-submit-button:hover{

        background: "your color" !Important;

    }

    Example:

    .form-submit-button:hover{

        background: red !Important;

    }

    Result:

    1561761118hover Screenshot 10

    Let us know if you need more help, we will be glad to assist you.

  • debfox
    Replied on July 1, 2019 at 1:47 PM

    I received help from Jotform support, this is what I was provided: 

    you can try injecting this CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-submit-button:hover{

        background: "your color" !Important;

    }

    Example:

    .form-submit-button:hover{

        background: red !Important;

    }


    however, this did not make the text white, and I couldn't insert a hex code for my color. I have access to the rgb and hsl color codes as well. 

  • David JotForm Support Manager
    Replied on July 1, 2019 at 2:16 PM

    You can use hex or rgb code too, example:

    .form-submit-button:hover{

        background: #4287f5 !Important;

    }

    The previous code was to change the color of the background of your submit button, if you need to change the text color too, you can add this code(which will work only for that button):

    #input_2:hover{

      color: #000000 !Important;

    }

    Result: https://form.jotform.com/91786751489981

    1562004981colorchange Screenshot 10

    Let us know if you need more help.