title: Issue getting button to be the same size as an image
body: <p>So, im trying to make it so my code has, at the bottom, 3 buttons next to each other with an image on them, planning on having each image change the text shown above said buttons. The issue is, my button ALWAYS has the same gap between the sides of the image and the sides of the button, changing height merely adds gap to the top and bottom, and reducing width just reduces the size of the whole button. <a href="https://i.stack.imgur.com/HsfBd.jpg" rel="nofollow noreferrer">full size button</a>, <a href="https://i.stack.imgur.com/EURkU.jpg" rel="nofollow noreferrer">reduced width</a>.</p>
  <p>I'd like to have the 3 images as mentioned next to each other, but have the button merely occupy the area the image does.</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>.button {
      background-color: Transparent;
      background-repeat: no-repeat;
      /*border: none;*/
      cursor: pointer;
      overflow: hidden;
      width: 23%;
      height:100%;
      padding: 0;
  }
  
  .speakers {
      bottom: 0px;
      text-align: center;
  }
  
  .speakers ul {
  }
  
  .speakers li {
      display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="speakers"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;button class="button"&gt;&lt;img src="img/rangel.png" alt="rangel" width="23%" height="auto"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="button"&gt;&lt;img src="img/grootens.png" alt="grootens" width="23%" height="auto"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="button"&gt;&lt;img src="img/lupi.png" alt="lupi" width="23%" height="auto"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>