Default

Use class name.z-btnto create buttons with default style.
Here are buttons with all available colors:


  <button class="z-btn primary">Primary</button>
  <button class="z-btn default">Default</button>
  <button class="z-btn green">Green</button>
  <button class="z-btn red">Red</button>
  <button class="z-btn teal">Teal</button>
  <button class="z-btn yellow">Yellow</button>
  <button class="z-btn purple">Purple</button>

Outline

Use class name.z-btn-outlineto create buttons with outline style.


  <button class="z-btn-outline primary">Primary</button>
  <button class="z-btn-outline default">Default</button>
  <button class="z-btn-outline green">Green</button>
  <button class="z-btn-outline red">Red</button>
  <button class="z-btn-outline teal">Teal</button>
  <button class="z-btn-outline yellow">Yellow</button>
  <button class="z-btn-outline purple">Purple</button>

Size

Use.smallto create small buttons.
Use.largeto create large buttons.


  <button class="z-btn primary small">Small</button>
  <button class="z-btn primary">Default</button>
  <button class="z-btn primary large">Large</button>

Styles

z-ui provides additional classes for volatile styles.
These are available: square, bold, shadow


  <button class="z-btn-outline primary square">Search</button>
  <button class="z-btn primary round">Search</button>
  <button class="z-btn-outline primary bold">Search</button>
  <button class="z-btn primary shadow">Search</button>

Icon


    <button class="z-btn primary">
        <i class="fa fa-cloud"></i>
        Button
    </button>
    <button class="z-btn default">
        <i class="fa fa-cloud"></i>
        Button
    </button>
    <button class="z-btn-outline primary">
        <i class="fa fa-cloud"></i>
        Button
    </button>
    <button class="z-btn-outline red">
        <i class="fa fa-cloud"></i>
        Button
    </button>
    <button class="z-btn gray">
        <i class="fa fa-cloud"></i>
        Button
    </button>

Use.circleto create circular icon button.


  <button class="z-btn circle primary">
      <i class="fa fa-search"></i>
  </button>
  <button class="z-btn-outline circle primary">
      <i class="fa fa-search"></i>
  </button>
  <button class="z-btn circle default">
      <i class="fa fa-search"></i>
  </button>

A button can refers to a link, you can use<a>instead of<button>.


  <a href="http://www.qq.com/" class="z-btn circle primary">
      <i class="fa fa-qq"></i>
  </a>
  <a href="https://wx.qq.com/" class="z-btn circle green">
      <i class="fa fa-weixin"></i>
  </a>
  <a href="https://weibo.com/" class="z-btn circle red">
      <i class="fa fa-weibo"></i>
  </a>

Disabled


  <button class="z-btn primary" disabled>Search</button>
  <button class="z-btn default" disabled>Search</button>
  <button class="z-btn-outline primary" disabled>Search</button>

Loading Status

Add class.loadingto display loading status, and the button will be unclickable.


  <button class="z-btn primary loading">
      <i class="fa fa-refresh fa-spin"></i>
      Loading
  </button>
  <button class="z-btn default loading">
      <i class="fa fa-spinner fa-spin"></i>
      Loading
  </button>

Block level Button

Add class.block and the button will render like a block.


  <button class="z-btn block primary large">SUBMIT</button>

Button Group

Use a wrapper tag and add the class.z-btn-group.


    <div class="z-btn-group">
        <button class="z-btn default">Left</button>
        <button class="z-btn default">Middle</button>
        <button class="z-btn default">Right</button>
    </div>

    <div class="z-btn-group">
        <button class="z-btn-outline green">YES</button>
        <button class="z-btn-outline red">NO</button>
    </div>

    <div class="z-btn-group">
        <button class="z-btn primary small">
            <i class="fa fa-angle-left"></i>
        </button>
        <button class="z-btn primary small">
            <i class="fa fa-angle-right"></i>
        </button>
    </div>

    <div class="z-btn-group">
      <button class="z-btn-outline small default"><i class="fa fa-plus"></i></button>
      <button class="z-btn-outline small default"><i class="fa fa-minus"></i></button>
      <button class="z-btn-outline small default"><i class="fa fa-upload"></i></button>
      <button class="z-btn-outline small default"><i class="fa fa-download"></i></button>
    </div>

Button

Button Type and Color