CSS to make the background color of the submit button slide up when hovered over

  • Profile Image
    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?



    This is a re-post of a comment on How to Customize the Submit Button with CSS

  • Profile Image
    mmlove1989
    Answered 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.PNG

     

    You can try the form I have creared.

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



  • Profile Image
    ailsargh
    Answered 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....

  • Profile Image
    Mike_G
    Answered on October 10, 2018 at 02: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.gif

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

  • Profile Image
    ailsargh
    Answered on October 11, 2018 at 03:34 AM

    Thank you Mike! That works perfectly!