title: How to make button size equal to background image size in HTML?
body: <p>I have the following code . The problem is that I am not succeeding in making the button size equal to the background image size. The size of the background image is 60x60 pixels. How should I code this?</p>
  
  <pre><code>  &lt;tr&gt;
                  &lt;td&gt;&lt;button style="width: 60px; height: 60px;"&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button style="width: 60px; height: 60px;"&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="darkSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button&gt;&lt;img src="lightSquare.jpg" /&gt;&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>I am getting the following output- </p>
  
  <p><img src="https://i.stack.imgur.com/a0v3a.jpg" alt="enter image description here"></p>