title: Change font size without box size changing
body: <p>I've been trying to create a button which would have its font size increased if it's hovered. And it works, but the problem is that the box itself becomes bigger when the font becomes bigger. One solution could be to have a fixed height, but I need it to stay as <code>auto</code>.</p>
  
  <p>But once the font size changes, the box height won't change automatically anymore and instead would stay the same size.</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>#btn {
    width: 40%;
    /* setting a height would fix this, but it must be auto */
    padding: 10px;
    background-color: #00A859;
    transition: font 0.5s ease-in;
    font-size: 16px;
  }
  
  #btn:hover {
    font-size: 22px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="btn"&gt;Hover me!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>