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

  • Profile Image
    kyrenia
    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
    BJoanna
    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. 

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    https://www.jotform.com/answers/270261 

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

  • Profile Image
    kyrenia
    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 https://form.jotformeu.com/63425097105352.

    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
    david
    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:

    https://www.jotform.com/uploads/kyrenia/form_files/back.590.jpg

    From this CSS:

    .form-pagebreak-next {
        background : url("https://www.jotform.com/uploads/kyrenia/form_files/back.590.jpg") no-repeat  !important;
        width : 96px !important;
        height : 42px !important;
        box-shadow : 10px 10px 5px #888888!important;
        border : none !important;
    }