title: Scale text size to fill button
body: <p>I have a button on my bootstrap website.</p>
  
  <pre><code>&lt;input type="submit" value="GET INSTANT ACCESS!"class="btn btn-lg"&gt;
  </code></pre>
  
  <p>I have used css to make its width 100%.</p>
  
  <pre><code>.btn-lg {
          width: 100%;
      }
  </code></pre>
  
  <p>I would like to scale the text inside the button to fill the width of the button (which fills the width of its containing div). However, I do not want the text to cause the button width to be greater than 100% and stretch the div that it is contained in.</p>
  
  <p>What I would like is the text being scaled to the width of the button:
  <img src="https://i.stack.imgur.com/zXmnV.jpg" alt="what I would like">
  rather than the text being to small
  <img src="https://i.stack.imgur.com/1AKEi.jpg" alt="what I would not like">
  or the text being too large and causing the webpage width to be greater than the device width
  <img src="https://i.stack.imgur.com/WM5bR.jpg" alt="what I would not like"></p>