<div class="section head">
  <div class="corset">
    <h1>Splited and divided Buttons</h1>
  </div>
</div>

<div class="section dark flatted">
  <div class="corset">
    <h4>dependency:</h4> 
    <code>@import "magic/content/buttons";</code>
  </div>
</div>

<div class="section hard-top">
  <div class="corset tight">
    
    
    <div class="btn btn-success btn-lg btn-splited">
      <div class="text">
        .btn-splited
      </div>
      <div class="icn">
        <i class="magicons-caret-right"></i>
      </div>
    </div>
    
    <div class="btn btn-default btn-lg btn-block btn-splited half">
      <div class="icn">
        <i class="olicons-message-full"></i>
      </div>
      <div class="text">
        .btn-splited.half
      </div>
    </div>
    
    <div class="btn btn-primary btn-lg btn-block btn-divided">
      <div class="icn">
        <i class="olicons-overview"></i>
      </div>
      <div class="text">
        .btn-divided
      </div>
    </div>
    
    <div class="btn btn-warning btn-block btn-divided half">
      <div class="icn">
        <i class="olicons-overview"></i>
      </div>
      <div class="text">
        .btn-divided.half
      </div>
    </div>
    
    <div class="btn btn-danger btn-sm btn-divided">
      <div class="icn">
        <i class="olicons-contact-data"></i>
      </div>
      <div class="text">
        .btn-divided
      </div>
      <div class="icn">
        <i class="olicons-male"></i>
      </div>
    </div>
    
    <div class="btn btn-default btn-xs btn-splited">
      <div class="icn">
        <i class="olicons-ok"></i>
      </div>
      <div class="text">
        .btn-splited
      </div>
      <div class="icn">
        <i class="olicons-close"></i>
      </div>
    </div>
    
  </div>
</div>


<div class="section flat-bottom hard-top">
  <div class="corset">
    <h2>Social Buttons</h2>
  </div>
</div>

<div class="section">
  <div class="corset">
    <div class="row">
      <div class="col-md-6">
        <h4 class="center_text">Flat</h4>
        <hr/>
        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
        <% for btn, i in buttons: %>
          <div class="btn btn-<%= btn %> btn-lg btn-divided">
            <div class="icn">
              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
            </div>
            <div class="text">
              .btn-<%= btn %>
            </div>
          </div>
        <% end%>
      </div>
      <div class="col-md-6">
        <h4 class="center_text">Nice</h4>
        <hr/>
        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
        <% for btn, i in buttons: %>
          <div class="btn btn-<%= btn %>-nice btn-lg btn-divided">
            <div class="icn">
              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
            </div>
            <div class="text">
              .btn-<%= btn %>-nice
            </div>
          </div>
        <% end%>
      </div>
    </div>
  </div>
</div>

<div class="section shine-top">
  <div class="corset">
    <p class="loud">splited and divided buttons are nice little helper for buttons that contain an icon</p>
    <p class="loud"><strong>Be carefull! .btn-splited & .btn-divided are always block elements.</strong></p>
    <pre>
      <code>
  &lt;div class=&quot;btn btn-success btn-lg btn-splited&quot;&gt;<br/>    &lt;span&gt;.btn-splited&lt;/span&gt;<br/>    &lt;span class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;magicons-caret-right&quot;&gt;&lt;/i&gt;<br/>    &lt;/span&gt;<br/>  &lt;/div&gt;<br/>  <br/>  <br/>  &lt;div class=&quot;btn btn-primary btn-lg btn-divided&quot;&gt;<br/>    &lt;div class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;icomoon-globe&quot;&gt;&lt;/i&gt;<br/>    &lt;/div&gt;<br/>    &lt;div&gt;<br/>      .btn-divided<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>
      </code>
    </pre>
    <p class="loud">tag of inner element doesn't matter just the element conaining the icon need class <strong>.icn</strong></p>
  </div>
</div>