There is a newer version of Luda.

Let's go!

Button Icon

Wrap icons in buttons to create beautiful icon buttons.

Icon in the Left

To create an icon button with an icon in the left, add the class .btn-ico-left to a button element, then wrap an icon inside.

<button class="btn btn-primary btn-ico-left btn-small">
  Search <i class="ico ico-search"></i>
</button>
<button class="btn btn-primary btn-ico-left">
  Search <i class="ico ico-search"></i>
</button>
<button class="btn btn-primary btn-ico-left btn-large">
  Search <i class="ico ico-search"></i>
</button>

Icon in the Right

To create an icon button with an icon in the right, add the .btn-ico-right class to a button element, then wrap an icon inside.

<div class="btn-check btn-hollow-primary btn-ico-right btn-small">
  <input type="checkbox">
  <label>Check <i class="ico material-icons">check</i></label>
</div>
<div class="btn-check btn-hollow-primary btn-ico-right">
  <input type="checkbox">
  <label>Check <i class="ico material-icons">check</i></label>
</div>
<div class="btn-check btn-hollow-primary btn-ico-right btn-large">
  <input type="checkbox">
  <label>Check <i class="ico material-icons">check</i></label>
</div>

Icon in the Top

To create an icon button with an icon in the top, add the .btn-ico-top class to a button element, then wrap an icon inside.

<button class="btn btn-primary btn-ico-top btn-small">
  Delete <i class="ico ico-cross"></i>
</button>
<button class="btn btn-primary btn-ico-top">
  Delete <i class="ico ico-cross"></i>
</button>
<button class="btn btn-primary btn-ico-top btn-large">
  Delete <i class="ico ico-cross"></i>
</button>

Icon Only

If you just want an icon button without any texts, you can add the class .btn-ico to a button element, then wrap only an icon inside.

<div class="btn-file btn-primary btn-ico btn-small">
  <input type="file">
  <label><i class="ico material-icons">cloud_upload</i></label>
</div>
<div class="btn-file btn-primary btn-ico">
  <input type="file">
  <label><i class="ico material-icons">cloud_upload</i></label>
</div>
<div class="btn-file btn-primary btn-ico btn-large">
  <input type="file">
  <label><i class="ico material-icons">cloud_upload</i></label>
</div>

Sass Variables

$button-icon-size-em: 1.286em !default

$button-icon-top-size-em: 1.5em !default

$button-icon-left-margin-em: 0 0.4em 0 0 !default

$button-icon-right-margin-em: 0 0 0 0.4em !default

$button-icon-top-margin-em: 0 0 0.15em 0 !default

$button-icon-top-height-rem: 4rem !default

$button-icon-top-large-height-rem: 5rem !default

$button-icon-top-small-height-rem: 3rem !default