CSS to make the background color of the submit button

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

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:

You can try the form I have creared.

https://form.jotform.me/mmlove1989/sakura

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....

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:

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

Thank you Mike! That works perfectly!