title: <button> with no text inside appears higher
body: <p>I'm trying to make a spinner within a button to indicate that an action is loading. the problem is that if a button has no text in it, it will appear higher than the rest of the buttons, and I want them to be aligned.</p>
  <p>Here's the HTML:</p>
  <pre><code>&lt;div&gt;
  
  &lt;button class='buttonclass'&gt;aaa&lt;/button&gt;
  
  &lt;button class='buttonclass'&gt;
  &lt;span class=&quot;loader&quot;&gt;&lt;/span&gt;
  &lt;/button&gt;
  
  &lt;button class='buttonclass'&gt;bbb&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>and the CSS:</p>
  <pre><code>.buttonclass {
    height: 40px;
    width: 40px;
  }
  
  .loader {
    display: inline-block;
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.75s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(45deg); }
    75% { transform: rotate(315deg); }
    100% { transform: rotate(360deg); }
  }
  </code></pre>
  <p>and this is the result</p>
  <p><a href="https://i.stack.imgur.com/ZF43G.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>I want all 3 buttons to be aligned, is it possible? thanks</p>