Splited and divided Buttons

dependency:

@import "magic/content/buttons";
@import "magic/content/buttons_nice";

.btn-splited

.btn-splited.btn-blank

.btn-splited.half

.btn-divided

.btn-divided.btn-blank

.btn-divided.half

.btn-divided

.btn-splited

Social Buttons

Flat

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

">

.btn-<%= btn %>

<% end%>

Nice

<% 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 %>

Nice

<% for key, value of buttons: %>

<%= key %>

<% for btn, i in value: %>

.btn-<%= btn %>-nice

<% 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 %>