title: How to make a button with inside border
body: <p>I'm trying to make a responsive button that has an "inner border" if that makes sense, see attached picture for what I'm talking about.</p>
  
  <p><img src="https://i.imgur.com/oBsa3RS.jpg" alt="button preview"></p>
  
  <p>Some of my buttons are a bit wider than others because the button text is longer which is where the responsive part comes in. I created this effect by putting my button into a container div, here's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="ttw_button_container"&gt;
  &lt;a class="ttw_button"&gt;START THE JOURNEY&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.ttw_button_container {
      background: #27d9b4;
      width: 330px;
      height: 50px;
      margin: 0 auto;
  }
  a.ttw_button{  
      background: #27d9b4;
      color: {{ settings.btn_text_color }};
      border: 1px solid white;
      padding: 6px 52px;
      margin: 4px 0 0 0;
      cursor: pointer;
      font-weight: bold;      
      font-size: 19px;
      text-transform: {{ settings.button_font_style }};
      display: inline-block;
      -webkit-transition: all 200ms ease 0s;
      -moz-transition: all 200ms ease 0s;
      -ms-transition: all 200ms ease 0s;
      -o-transition: all 200ms ease 0s;
      transition: all 200ms ease 0s;
      -webkit-appearance: none;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p>Is there a way I can have the container div resize itself to fit the button? Currently I'm manually editing the container's width to fit each button but would ideally like this to be done automatically. Is there a way to do this using just CSS or do we need to bring javascript into the mix?</p>
  
  <p>Thank you!</p>