How can I remove the border and box shadow of the submit button

  • rwaldenjr
    Asked on February 17, 2018 at 3:06 PM

    I'm having trouble using custom images for my Submit buttons. Most of my buttons have two problems: the first is that they align to the top-left of the underlying (default) button, which I'll address in a separate question (see How to center image file on Submit button?); and the second is that there' a line or shadow surrounding the image which appears to be from the button behind the custom image. (I'm using .PNG files with transparent backgrounds. So, the line/shadow is not coming from my images.) I've noted that when the Button Size is "Block" rather than "Normal" in Advanced Designer, the line/shadow extends all the way out to the full width of the form.

    In reading Forum posts, I see that Exa posted the same question six years ago. And, your colleague Abajan discussed a long list of custom CSS code to modify the default button behavior for all buttons (incl. border, radius, background, shadow, hover and active; see link, below). Is that still the preferred method to fix this issue? Has anything been done in all these years to address the problem?

    Thanks for your help,
    - Robert

     

    background color when using image for submit button

    Jotform Thread 1387985 Screenshot
  • rwaldenjr
    Replied on February 17, 2018 at 3:09 PM

    Here's an example of what's showing when you hover over one of these buttons that have an image file instead of the default button face. In this case, this is one which has the size set to "Block" in Advanced Designer.

    - Robert


    1518898049Submit button background visib Screenshot 10


  • Support_Management Jotform Support
    Replied on February 17, 2018 at 6:34 PM

    For the first image, the culprit is the box-shadow styling of the button, regardless if you use an image or not.

    And the second image is caused by the border that appears on hover state.

    The codes you need for this will highly depend on the button styling you have chosen since each uses its own respective set of CSS codes to style the button.

    Mike already took care of this part on the other thread you opened here. Notice the codes he provided removes the box-shadow and the border on hover state. Use his CSS codes and that should remove those borders around your submit button.

  • rwaldenjr
    Replied on February 17, 2018 at 7:22 PM

    Yup! Mike's codes cleaned up the alignment and shadow problems with my buttons perfectly! Thanks for the additional explanations, Jim!