I have successfully added the image, but it is about 3 pixels to the left and I am not sure why. It is also not appearing in the front of the default button image on hover but behind it (which I would not have seen had it not been misaligned).

<!-- HTML CONTACT FORM -->

        <div class="form_background">
            <div class="container">
                <div class="screen">
                    <div class="screen-header">
                    </div>
                    <div class="screen-body">
                    <div class="screen-body-item left">
                        <div class="app-title">
                        <span>Say</span>
                        <span>HELLO!</span>
                        </div>
                        
                    </div>
                    <div class="screen-body-item">
                        <div class="app-form">
                        <div class="app-form-group">
                            <input class="app-form-control" placeholder="Your Name">
                        </div>
                        <div class="app-form-group">
                            <input class="app-form-control" placeholder="Your Email">
                        </div>
                        <div class="app-form-group message">
                            <input class="app-form-control" placeholder="MESSAGE">
                        </div>
                        <div class="app-form-group buttons">
                            <button class="app-form-button"><img src="images/Submit_Small.png" onMouse> </button>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
          </div>

/* CSS STYLE */

  .app-form-group.buttons:hover {
    background: url(images/Submit_Small_Hover.png);
    background-repeat: no-repeat;
    padding-left: -50px;
    text-align: center;
  } 

I am open to standard Javascript but would prefer simple CSS and HTML code. I am currently coding in VS Code using Live Server extension.

For Centering
I have tried adjusting margins and padding. Padding works when moving the background image to the left but it does not affect moving the image to the right. I have tried positive values and negative values.

For Image Display
I have been researching :before option, but there seems to be an easier option that I just cannot narrow in on.

I appreciate any feedback on this matter. Thank you! I have reviewed other posts and options but they appear to utilize code or other tactics I am not super familiar with.