title: How to make a button truly circular in Semantic UI
body: <p>If I add the <code>circular</code> class to a button with words in it, the button doesn't really become a circle, just a rectangle with rounded edges:</p>
  
  <p><a href="https://i.stack.imgur.com/nQQEE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nQQEE.png" alt="enter image description here"></a></p>
  
  <p>How do I make the button become a circle? I want its diameter to be the same as that of the one above, but have more fill in the top and bottom so that it looks like a circle.</p>
  
  <p>My HTML currently looks like this:</p>
  
  <pre><code>&lt;div id="my-button" class="ui circular animated button" tabindex="0"&gt;
      &lt;div class="visible content"&gt;A button&lt;/div&gt;
      &lt;div class="hidden content"&gt;
          &lt;i class="right arrow icon"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: Alternatively, what would be an easy way to make a circular button with text in it? I'm not hellbent on using Semantic UI.</p>