CSS to make the background color of the submit button

  • ailsargh
    Asked on October 10, 2018 at 11:50 AM

    Hi, Could you tell me how to apply CSS3 to make the colour slide up the button when hovered over?

  • Mafe_M JotForm Support
    Replied on October 10, 2018 at 12:54 PM

    You can try this code for your submit button. This is how my submit button looks like when you hover the mouse to the button itself.

    #input_2 {

        color : #64609A;

        background-color : #436CB9;

        border : 3px solid;

        font-family : Trebuchet MS;

        font-size : 18px;

        width : 90px;

        height : 44px;


    The submit button design  I used is this:

    1539190684name6 Screenshot 10


    You can try the form I have creared.


  • ailsargh
    Replied on October 10, 2018 at 12:57 PM

    Thank you for your response! I was actually looking for something more like this https://codepen.io/daniellesalley/pen/ozKjr

    I realise the code is there but not sure which part relates to the sliding animation. It seems very long just to add a simple action....

  • Mike_G JotForm Support
    Replied on October 10, 2018 at 2:00 PM

    I have used a clone version of one of your forms as an example to show how to make the background color of the submit button slide up when the button is being hovered over.

    Here's the clone version: https://form.jotform.com/82825400942960

    The first thing that you need to do is remove the existing CSS codes in your form that changes the background color of the submit button when being hovered over. This is to prevent any conflict with the new CSS codes that we will be adding.

    After you have removed the CSS codes from your form, you may already inject the CSS codes below.

    .form-submit-button:hover::after {

        height: 28px !important;


    .form-submit-button::after {

        position: absolute;

        content: '';

        left: 0;

        bottom: 0px;

        width: 198px;

        height: 0;

        background: linear-gradient(to bottom, #ff0066 0%, #ffcc00 100%);

        transform-origin: bottom;

        transition: height 0.25s linear;

        z-index: -1;


    .form-submit-button:hover {

        color: white;


    .form-submit-button {

        display: inline-block;

        background: transparent;

        color: black;

        position: relative;

        transition: color 0.25s ease;

        z-index: 1;


    I have highlighted the color values that you can update to your preference.

    Here's how it will look like after:

    1539194300t13 57 Screenshot 10

    If you have other questions or concerns, please do not hesitate to let us know.

  • ailsargh
    Replied on October 11, 2018 at 3:34 AM

    Thank you Mike! That works perfectly!