title: How to change the image in my button on hover?
body: <p>Im trying to change the image on my button on hover, however, all I find online uses background image in css, I don't want that and that uses all of the space in the button. I want it to just swap the initial image with the final image, this is because, in the mobile version of my webpage I want it to change the background color of the button and change the image with the same image but in a different color.. So far, I have got this:</p>
  <p>HTML and CSS</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btnExample{
     width: 60px;
    height: 60px;
    text-decoration: none;
    display: inline-block;
    outline: none;
    cursor: pointer;
    border-style: 3px #01509f;
    color: black;
    background-color: #fff;
    border-radius: 100%;
    margin-left: 20px;
    
    text-align: center;
   
  }
  
  .btnExample:hover{
    background-color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="btnExample"  &gt;
      &lt;img src="https://www.pngfind.com/pngs/m/2-24642_imagenes-random-png-cosas-random-png-transparent-png.png" width="18" height="18" alt=""/&gt;&lt;/button&gt;
   </code></pre>
  </div>
  </div>
  </p>
  <p>this inserts an image inside my button without being a background image and changes the background color from white to black. Now, how do I replace it with another image on hover?</p>