扁平按钮可用状态

press me press me press me press me press me press me

press me press me press me press me press me press me

press me press me press me press me press me press me

    
      <a href="#" class="button button-rounded button-flat-default" >press me</a>
      <a href="#" class="button button-rounded button-flat-primary" id="verify_code">press me</a>
      <a href="#" class="button button-rounded button-flat-success">press me</a>
      <a href="#" class="button button-rounded button-flat-warning">press me</a>
      <a href="#" class="button button-rounded button-flat-danger">press me</a>
      <a href="#" class="button button-rounded button-flat-royal">press me</a>
      <br />
      <br />

      <a href="#" class="button button-pill button-flat-default">press me</a>
      <a href="#" class="button button-pill button-flat-primary">press me</a>
      <a href="#" class="button button-pill button-flat-success">press me</a>
      <a href="#" class="button button-pill button-flat-warning">press me</a>
      <a href="#" class="button button-pill button-flat-danger">press me</a>
      <a href="#" class="button button-pill button-flat-royal">press me</a>
      <br />
      <br />

      <a href="#" class="button button-tiny button-flat-default">press me</a>
      <a href="#" class="button button-tiny button-flat-primary">press me</a>
      <a href="#" class="button button-tiny button-flat-success">press me</a>
      <a href="#" class="button button-tiny button-flat-warning">press me</a>
      <a href="#" class="button button-tiny button-flat-danger">press me</a>
      <a href="#" class="button button-tiny button-flat-royal">press me</a>
      <br />
      <br />
    
    

扁平按钮禁用状态

press me press me press me press me press me press me

press me press me press me press me press me press me

press me press me press me press me press me press me

    
      <a href="#" class="button button-rounded button-flat-default disabled" >press me</a>
      <a href="#" class="button button-rounded button-flat-primary disabled" id="verify_code">press me</a>
      <a href="#" class="button button-rounded button-flat-success disabled">press me</a>
      <a href="#" class="button button-rounded button-flat-warning disabled">press me</a>
      <a href="#" class="button button-rounded button-flat-danger disabled">press me</a>
      <a href="#" class="button button-rounded button-flat-royal disabled">press me</a>
      <br />
      <br />

      <a href="#" class="button button-pill button-flat-default disabled">press me</a>
      <a href="#" class="button button-pill button-flat-primary disabled">press me</a>
      <a href="#" class="button button-pill button-flat-success disabled">press me</a>
      <a href="#" class="button button-pill button-flat-warning disabled">press me</a>
      <a href="#" class="button button-pill button-flat-danger disabled">press me</a>
      <a href="#" class="button button-pill button-flat-royal disabled">press me</a>
      <br />
      <br />

      <a href="#" class="button button-flat-default small disabled">press me</a>
      <a href="#" class="button button-flat-primary small disabled">press me</a>
      <a href="#" class="button button-flat-success small disabled">press me</a>
      <a href="#" class="button button-flat-warning small disabled">press me</a>
      <a href="#" class="button button-flat-danger small disabled">press me</a>
      <a href="#" class="button button-flat-royal small disabled">press me</a>
      <br />
      <br />
    
    

按钮大小控制

press me press me press me press me press me
    

<a href="#" class="button button-rounded button-flat-primary button-jumbo">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-large">press me</a>
<a href="#" class="button button-rounded button-flat-primary">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-small">press me</a>
<a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a>

    
    

下拉菜单按钮 如果子项比标题长,button-dropdown后面加 button-dropdown-right

press me 下面 上面 下面 操作
    
<span class="button-dropdown" data-buttons="dropdown">
  <a href="#" class="button button-rounded button-flat-warning"> press me <i class="fa fa-caret-down"></i></a>

  <ul class="button-dropdown-menu">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
  </ul>
</span>

<span class="button-dropdown" data-buttons="dropdown">
  <a href="#" class="button button-rounded button-flat-primary"> 下面 <i class="fa fa-caret-down"></i></a>

  <ul class="button-dropdown-menu-below">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
  </ul>
</span>

<span class="button-dropdown" data-buttons="dropdown">
  <a href="#" class="button button-rounded button-flat-success"> 上面 <i class="fa fa-caret-down"></i></a>

  <ul class="button-dropdown-menu-above">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
  </ul>
</span>


<span class="button-dropdown" data-buttons="dropdown">
  <a href="#" class="button button-rounded button-flat-danger button-tiny"> 下面 <i class="fa fa-caret-down"></i></a>

  <ul class="button-dropdown-menu-below">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
  </ul>
</span>

<span class="button-dropdown" data-buttons="dropdown">
  <a href="#" class="button button-pill button-border-danger small">操作</a>

  <ul class="button-dropdown-menu-below">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li class="button-dropdown-divider"><a href="#">Option 3</a></li>
  </ul>
</span>

    
    

边框按钮

press me press me press me press me press me press me
    

      <a href="#" class="button button-border-default">press me</a>
      <a href="#" class="button button-border-primary button-rounded">press me</a>
      <a href="#" class="button button-border-success button-pill">press me</a>
      <a href="#" class="button button-border-warning button-circle">press me</a>
      <a href="#" class="button button-border-danger"><i class="fa fa-camera"></i> press me</a>
      <a href="#" class="button button-border-royal button-pill">press me</a>

      
    

边框按钮禁用

press me press me press me press me press me press me
    

      <a href="#" class="button disabled button-border-default">press me</a>
      <a href="#" class="button disabled button-border-primary button-rounded">press me</a>
      <a href="#" class="button disabled button-border-success button-pill">press me</a>
      <a href="#" class="button disabled button-border-warning button-circle">press me</a>
      <a href="#" class="button disabled button-border-danger"><i class="fa fa-camera"></i> press me</a>
      <a href="#" class="button disabled button-border-royal button-pill">press me</a>