Remove hover effect from text on submit button

  • Profile Image
    myzipcard
    Asked on June 09, 2016 at 12:51 PM

    Hi,

    I have a couple of forms on a page and I use them both in lightbox mode. I'd like to remove the hover effect of the text from the submit buttons. I can't seem to to be able to find where exactly I can change the color or this setting anywhere. 

    The buttons (Sign up) are on the page for which I've included the link. 

     

    Thanks.

  • Profile Image
    dane003
    Answered on June 09, 2016 at 02:18 PM

    Hi,

    I would like to help.

    You can customize your submit buttons by injecting CSS codes.
    Here is a guide on how to inject CSS codes:
    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    You can add a CSS code for the submit button to change its style or effect. Just change or add some attribute to its class. For example, you want to change the cursor effect of the submit button and the weight of its font at hover, just add the code into  the Inject Custom CSS area in the PREFERENCES, under Form Styles, then Custom CSS tab.

    ex:
    .form-submit-button{

    cursor: text;

    }

    .form-submit-button:hover{


    font-weight: 600;


    }

     

    Here is the detail guide on how to change the style of the submit button through CSS codes.
    http://www.jotform.com/help/118-Submit-Button-CSS-CSS3

    I hope it helps.

  • Profile Image
    Welvin
    Answered on June 09, 2016 at 04:46 PM

    I've checked the forms and the hover effect has been changed already so I think the codes given by dane003 works for you. 

    Please feel free to contact us back if you need help with anything else. We are here to help.

     

  • Profile Image
    myzipcard
    Answered on June 16, 2016 at 11:25 AM

    Thanks, but I might be missing something as my issue persists. I added the following piece of code as instructed in the CSS of the form:

     

    .form-submit-button:hover{

    font-color: #fff;

    }

     

    Nothing changed as the text still changes color when I place the mouse over it. 

    What am I doing wrong? 

     

    Thanks. 

  • Profile Image
    Danilo
    Answered on June 16, 2016 at 01:01 PM

    Hi,

    I checked your form. The text on your submit button doesn't change color already on our end, at hover. I also tried it on your website and the submit button doesn't change color already at my end.
    I'm viewing it in google Chrome. 




  • Profile Image
    myzipcard
    Answered on June 16, 2016 at 02:11 PM

    Hi, 

    And thanks for checking. I am seeing a totally different result on my end. I tried Safari, Chrome, Firefox. On all of them there is a hover effect and the text changes color. Any idea why?

    Thanks.

  • Profile Image
    Nik_C
    Answered on June 16, 2016 at 04:41 PM

    I'm assuming that you're referring to this effect:

    I did some checking in your code, so please try to add this CSS:

    .btn.lightbox-61604259869164{

        background-color: transparent;

        text-decoration: none;

     

        color: white;

    }

    Hope it helps!

  • Profile Image
    myzipcard
    Answered on June 17, 2016 at 06:58 AM

    Thanks for the solution. Believe it or not, but it doesn't work. I added the lines of code and added the form again to my site. No changes at all, unfortunately. 

  • Profile Image
    Welvin
    Answered on June 17, 2016 at 08:13 AM

    Your original question is about the submit button but looks like you want to change the effect of the lightbox button as well. Please do the following changes:

    For the button on the left, use the following callout button:

    <a class="btn lightbox-61604259869164" style="margin-top: 16px;color: #fff !important;text-decoration: none !important;font-weight: normal !important;cursor: pointer;"> SIGN UP </a>

     

    For the button on the right, use the following callout button:

    <a class="btn lightbox-61604551102139" style="margin-top: 16px;color: #fff !important;text-decoration: none !important;font-weight: normal !important;cursor: pointer;"> SIGN UP </a>

  • Profile Image
    myzipcard
    Answered on June 17, 2016 at 09:26 AM

    Now I realized I was asking the wrong question when in fact I was referring to the lightbox button. Thanks for catching that and for your help. The new codes solved my issue and everything looks great. 

    Thanks again. 

  • Profile Image
    Chriistian
    Answered on June 17, 2016 at 10:34 AM

    Hi,

    Glad to hear it is solved now. On behalf of my colleagues who solved the issue, you are welcome. Let us know if you need further assistance and we are happy to help.