How do you add custom image with rollover effect to next back buttons ?

  • Profile Image
    Asked on December 08, 2016 at 12:31 PM

    Hi I'm trying to simply place a image in the next and back buttons and add a roll over effect which will apply a box shadow.

    Been play for hours but cant get it to work even on a simple form with only page break on.

    I can't seem to over ride the preset button effect even though i have selected none in options.

    thanks in advance.

  • Profile Image
    Answered on December 08, 2016 at 01:46 PM

    It is possible to style page break buttons inside of Form Designer.

    It is also possible to style it with CSS. 

    You can also check this thread to see how images can be added to page break buttons. 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image
    Answered on December 08, 2016 at 03:00 PM

    thanks for the reply , still not getting any where near the result I want.

    my test form is here

    I have tried once again applying the css code as listed above.

    The next button image  appears in the design editor but when i preview it i have no image on the button .

  • Profile Image
    Answered on December 08, 2016 at 05:44 PM

    I checked your form and the correct image is being shown at this time:

    This is the file currently being applied to your next button:

    From this CSS:

    .form-pagebreak-next {
        background : url("") no-repeat  !important;
        width : 96px !important;
        height : 42px !important;
        box-shadow : 10px 10px 5px #888888!important;
        border : none !important;