title: Build responsive button with image, text and a link using css
body: <p>I tried several things but I am out of luck. I need to build a button containing an image and text over a button background image. Also, clicking anywhere inside the button should redirect to a page, for example, google.com. This is how the button should look like </p>
  
  <p><a href="https://i.stack.imgur.com/VZlRp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VZlRp.jpg" alt="enter image description here"></a></p>
  
  <p>The challenge I am having is that when the button text changes or when the screen size changes, the alignment of the image and the text gets messed up. I want to wrap the button text if it is too large. How do I wrap the button text and still align everything correctly? Also, I want the button width to be the same as I have to build multiple buttons of the same size with varied texts and images. Thank you so much. A quicker solution will be appreciated as I am anxious to see what I am doing wrong. Here is the code I have so far: <a href="https://jsfiddle.net/oz279bb8/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;a href="https://www.google.com" style="color: white !important; background-color: #7FFF00;padding: 25px;width: 50px;"&gt; 
      &lt;span style="margin-bottom: 5%;"&gt; 
          &lt;img src="http://placehold.it/30x30" height:100%; style="display: inline-block;" width="30" height="30" /&gt; 
          &lt;span style="display: inline-block;"&gt; 
              &lt;b&gt;&lt;font size ="2" color="BLACK" face="Arial"&gt;CLICK ON THE IMAGE TO VIEW MORE DETAILS ABOUT THE ITEM &lt;/font&gt; &lt;/b&gt; 
          &lt;/span&gt; 
      &lt;/span&gt; 
  &lt;/a&gt; 
  </code></pre>