How do I create a mouseover effect for custom buttons?

  • Profile Image
    igenmedia
    Asked on April 24, 2013 at 06:00 PM

    Hi there. I am trying to create a mouseover effect on my form using custom button images I created. I have the image urls for the buttons; however, everytime I think I have the code to input this nothing happens. The button is just static.

     

    Can you please advise?

  • Profile Image
    EltonCris
    Answered on April 24, 2013 at 06:35 PM

    Hi,

    You can use the following CSS codes and inject it to your form.

    .form-submit-button{

    background:url('FIRST BUTTON URL HERE') no-repeat top center;

    border:none !important;

    box-shadow:0 !important;

    height:100px;

    width:100px;

    }

     

    .form-submit-button:hover{

    background:url('SECOND BUTTON URL HERE') no-repeat top center;

    border:none !important;

    box-shadow:0 !important;

    }

    Make sure to change the bolded part and removed your button image inserted on the button image toolbar.

    Guide: How to Inject Custom CSS Codes to your Form

    Let us know if anything went wrong. Thank you!

  • Profile Image
    igenmedia
    Answered on April 25, 2013 at 11:40 AM

    Hi, I tried using the code you provided me and just like all the other attempts it does not seem to be working. When i hover my mouse over the button it does nothing and when i click on it it is just static.

  • Profile Image
    abajan
    Answered on April 25, 2013 at 11:49 AM

    A couple of semicolons are missing from the CSS. This may be the problem but we'll have to run some tests and get back to you.

  • Profile Image
    abajan
    Answered on April 25, 2013 at 12:19 PM

    Okay, I've found a solution. Load the form into the form builder and do the following:

    1. Click the submit button, click the Submit Text button, select the text and hit the spacebar on your keyboard. This will replace the text with a space

    (The small blue rectangle above indicates where the space is)


    2.
    Click the Button Image button and remove the URL


    3.
    Insert the missing semicolons to which I earlier referred (highlighted in red)

    .form-submit-button {
    background: url(http://mvs007-002.directrouter.com/~balticro/images/claimrewarda.jpg) no-repeat top center;
    border: none !important;
    box-shadow: 0 !important;
    height: 37px;
    width: 157px;
    }

    .form-submit-button:hover {
    background: url(http://mvs007-002.directrouter.com/~balticro/images/claimrewardb.jpg) no-repeat top center;
    border: none !important;
    box-shadow: 0 !important;
    }

    4. Save the form

    If you need further assistance, please let us know.

  • Profile Image
    igenmedia
    Answered on April 25, 2013 at 12:56 PM

    It worked!!!!! Thank you so much!!!!

  • Profile Image
    igenmedia
    Answered on April 26, 2013 at 11:58 AM
    fyi..
    Best Regards,
    Hugo Fernandez, Managing Partner
    Direct Line: (630) 302-3500
    iGenMedia: www.iGenMedia.com
    1812 High Grove Lane, Building 101
    Naperville, Illinois 60540
  • Profile Image
    KadeJM
    Answered on April 26, 2013 at 12:33 PM

    Great, that's Awesome! :0)

    On behalf of my colleagues that helped you, you're very welcome and we're happy to hear it worked for you. If you need help with anything else feel free to talk to us more as needed and thanks for letting us know.