按钮



在Material Design中共有三种不同的按钮类型。上浮按钮,在视觉上提供一些阴影处理,作为标准的按钮意味着它可以被用来点击。 浮动的圆形按钮常常意味着一些非常重要的功能。扁平按钮通常用在一些模块的内部,例如卡片或者弹出层。

上浮

button button button

  <a class="waves-effect waves-light btn">Stuff</a>
  <a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
  <a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
        

浮动




  <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>
        

固定

如果你想固定一个浮动按钮,当鼠标划过的时候显示更多的操作。请看页面右下角的示例。


  <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large mdi-editor-mode-edit"></i>
    </a>
    <ul>
      <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
      <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
      <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
    </ul>
  </div>
        

扁平

Button

  <a class="waves-effect waves-teal btn-flat">Button</a>
        

提交

当你想提交一个表单,不要用input标签,用一个包含type="submit"的button标签。


  <button class="btn waves-effect waves-light" type="submit" name="action">Submit
    <i class="mdi-content-send right"></i>
  </button>
        

大号

大块头通常能引起你的注意。

Button button button

  <a class="waves-effect waves-light btn-large">Button</a>
  <a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud left"></i>button</a>
  <a class="waves-effect waves-light btn-large"><i class="mdi-file-cloud right"></i>button</a>
        

禁用

在任何类型的按钮中都能使用这个特性。

Button Button Button

  <a class="btn-large disabled">Button</a>
  <a class="btn disabled">Button</a>
  <a class="btn-flat disabled">Button</a>
  <a class="btn-floating disabled"><i class="mdi-content-add"></i></a>