title: Fully circular buttons with dynamic size
body: <p>I am trying to create circular buttons in CSS. I use <code>border-radius: 100%</code> to make the button look like a circle but it only works if I explicitly set the width and height of the element. But if I do so, the buttons will not adjust to fix larger text</p>
  
  <p>This is what I've tried so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.round-button{
    width: 60px;
    height: 60px;
    text-decoration: none;
    display: inline-block;
    outline: none;
    cursor: pointer;
    border-style: none;
    color: white;
    background-color: #3498db;
    border-radius: 100%;
    overflow: none;
    text-align: center;
  }
  
  .round-button:active{
    background-color: #2980b9;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;button class="round-button"&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;button class="round-button"&gt;This text will overflow the button!&lt;/button&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see the first button looks pretty OK, but the text in the second button overflows it. I've used <code>overflow: hidden</code> to prevent it from looking ugly but I would like the buttons size to adjust according to the content's size. Is that possible?</p>