Change Button Image on Hover

Question

Form Screenshot 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.

dlnsskn · Accepted Answer · 2024-08-13 13:18:29Z

There could be initial paddings and i wouldnt reccomend using background url,of course it is way more simple but you won't have much control over the image as in "img" element so using an "img" element will give you more control and flexibility, you can use a lot of css futures with it. For hovering i reccomend you to search "css hover state". For example here is a good source.

.app-form-button {
  border: none;
  padding: 0;
  /* ensure for no initial paddings apply */
}

.hover-img {
  display: none;
  /* we dont want to display hover-img yet */
}

.app-form-button:hover .default-img {
  /* when hover hide default img with display none*/
  display: none;
}

.app-form-button:hover .hover-img {
  /* when hover set hover-img inline for it to show*/
  display: inline;
}

<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 class="default-img" src="./Submit_Small.jpg" >
                            <img class="hover-img" src="./Submit_Small_Hover.jpg">
                        </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Change Button Image on Hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related