How to center image file on Submit button?

This question is Part 2 of a question I mentioned a little bit ago. I'm having trouble with custom image files for my Submit buttons, as follows (see Edge of background button still visible around custom image):

"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; 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."

For several of my buttons, the Button Alignment "Auto" and "Center" (in Properties) align the underlying (default) background button, but not the button image on top. This doesn't seem to be consistent though. And, I don't see anything in the CSS or Settings that seem to indicate why this is happening, or that effects a change in these errant buttons' alignments. I resorted to injecting custom code for left and right padding and margins. But, that seems like a band aid for a broken code somewhere that I should be able to correct. [Note: "margin-left: auto;" and "margin-right: auto;" frequently have no affect on the button!]

I also note that my buttons sometimes resize to form-width when embedded on my web page, along with all of the input fields; seems to happen no matter whether I use an iFrame, or the Weebly JotForm app. I don't understand what's causing this, or how to remedy it.

Any help for these issues would be greatly appreciated. Thanks,
- Robert

It seems that the image is not properly centered due to an issue with the button's width. Try adding the next CSS to your form in order to center the image and remove the border.

/* Fix width to center the button image */
.form-submit-button {
width: auto !important;
}
/* Remove border and shadow around the button */
.form-submit-button {
background: none !important;
border: none !important;
box-shadow: none !important;
}
/* Remove border on hover */
.form-submit-button.form-submit-button-simple_orange:hover {
border: none !important;
}

Thank you.

Your code seems to work great on the test form I tried it on, Mike! I'll implement it on all the remaining forms, and let you know if I run into any further problems.

Any idea why this problem has been ongoing for so many years? Is there some back-end issue that needs to be elevated to your developers so that the underlying button doesn't require these additional fixes when using a custom image? Seems like they could be scripted into the upload image process!?!

I think the default theme should resize properly the button when the image is added, please note that a theme may have a custom CSS code affecting the submit button and this is why it may not be resizing the button's size correctly.

Mike (and Kevin) -

I implemented the CSS codes you gave me on all my forms. And, it proved successful on all but one; my Contact Us form. The Submit button still won't center on that form, despite your code. However, I was able to center it if I also added the following code. Any idea why this form is different from the rest, and not responsive to your code fix?

Additional CSS I added to center the button:

#input_2 {
    margin-left : auto;
    margin-right : auto;
    }

Aside from what Kevin said regarding the theme used, that could override the Custom CSS used, I'm not sure what else could be affecting it.

If you need any additional assistance please let us know.

Thank you!