title: Round button that accommodates text
body: <p>I've got this button below. It works okay but I want it to be able to change in size to accommodate different text lengths and sizes. For example, if I increase the font size, the button will get larger if the font size is too large (the text would extend past the button boundaries). How should I do this?</p>
  
  <p>Also, why is it that bootstrap is making the text appear a little bit lower than where I intended it to be? (centered vertically)
  <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>.round-btn {
      margin: 0 auto;
      display:block;
      width:150px;
      height:150px;
      line-height:150px;
      border: 5px solid #f5f5f5;
      border-radius: 50%;
      color:#f5f5f5;
      text-align:center;
      background-color: #17BAEF;
      font-size:20px;
      font-weight:bold;
     text-decoration: none;
     
    
  }
  .round-btn:hover {
     color: #17BAEF;
     background-color: #f5f5f5;
     text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;a class="round-btn" href="#"&gt;Button&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>