title: Unicorn-UI: Buttons text moves (possibly overlapping styles?)
body: <p>Attaching js fiddle link here first <a href="https://jsfiddle.net/6Lb7gLyz/" rel="nofollow noreferrer">js fiddle link here</a></p>
  
  <p>I'm having a little difficult time trying to create a button using <a href="http://unicorn-ui.com/buttons/" rel="nofollow noreferrer">Unicorn UI Button library</a> to open up modal window.  </p>
  
  <p>The problem I am encountering is the alignment of the text.<br>
  When my code is </p>
  
  <pre><code>&lt;button class="button button-raised button-action button-circle button-extreme"&gt;Wireframe and Mockups&lt;/button&gt;  
  </code></pre>
  
  <p>The text is aligned properly as shown here<br>
  <a href="https://i.stack.imgur.com/1mvn7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1mvn7.png" alt="Correctly Shown"></a><br>
  However, when I change the code by giving it a label so that I can have my modal window code working such as  </p>
  
  <pre><code>&lt;label for="window-1" button class="button button-raised button-action button-circle button-extreme"&gt;Wireframe and Mockups&lt;/button&gt;&lt;/label&gt;
  </code></pre>
  
  <p>The text gets misaligned as shown.<br>
  <a href="https://i.stack.imgur.com/M1lX8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M1lX8.png" alt="Incorrect"></a>  </p>
  
  <p>I've tried changing the css styles in the buttons library as well as changing the css for the modal window, but I just cannot get the text alignment to stay the same when I apply the <code>"label for = "windows 1"</code> . Please help me what I am doing wrong.</p>