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

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.

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.

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 .

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;
}