Splited and divided Buttons

dependency:

@import "magic/content/buttons";
.btn-splited
.btn-splited.btn-blank
.btn-splited.half
.btn-splited.half
.btn-divided
.btn-divided.btn-blank
.btn-divided.half
.btn-divided
.btn-divided
.btn-splited

Social Buttons

Flat

<% buttons = ["facebook", "google", "paypal", "twitter"]%> <% for btn, i in buttons: %>
">
.btn-<%= btn %>
<% end%>

Blank

<% buttons = ["facebook", "google", "paypal", "twitter"]%> <% for btn, i in buttons: %>
">
.btn-<%= btn %>-nice
<% end%>

Blur

<% buttons = ["facebook", "google", "paypal", "twitter"]%> <% for btn, i in buttons: %>
">
.btn-<%= btn %>-nice
<% end%>

splited and divided buttons are nice little helper for buttons that contain an icon

Be carefull! .btn-splited & .btn-divided are always block elements.

      
  <div class="btn btn-success btn-lg btn-splited">
    <span>.btn-splited</span>
    <span class="icn">
      <i class="magicons-caret-right"></i>
    </span>
  </div>
  
  
  <div class="btn btn-primary btn-lg btn-divided">
    <div class="icn">
      <i class="icomoon-globe"></i>
    </div>
    <div>
      .btn-divided
    </div>
  </div>

tag of inner element doesn't matter just the element conaining the icon need class .icn

Available Colors

<% dflt_btns = ["default", "success", "primary", "info", "warning", "danger"] %> <% scl_btns = ["facebook", "google", "paypal", "twitter"] %> <% brnd_btns = ["brand"] %> <% cstm_btns = ["one", "two", "three"] %> <% buttons = { default: dflt_btns, socials: scl_btns, brand: brnd_btns, custom: cstm_btns } %>

Flat

<% for key, value of buttons: %>
<%= key %>
<% for btn, i in value: %>
.btn-<%= btn %>
<% end %> <% end %>

Blank

<% for key, value of buttons: %>
<%= key %>
<% for btn, i in value: %>
.btn-<%= btn %> + .btn-blank
<% end %> <% end %>

Blur

<% for key, value of buttons: %>
<%= key %>
<% for btn, i in value: %>
.btn-<%= btn %> + .btn-blur
<% end %> <% end %>

blank-soft

<% for key, value of buttons: %>
<%= key %>
<% for btn, i in value: %>
.btn-blank-soft
<% end %> <% end %>

Special Classes:

<% btns = ["btn-xs", "btn-sm", "", "btn-lg", "btn-xl"] %>

Round

<% for btn in btns: %> <% end %>

Borderless

<% for btn in btns: %> <% end %>

Width

<% for btn in btns: %> <% end %>

Uppercase

.btn-uppercase | .btn-upcase

<% for btn in btns: %> <% end %>