materialize CSS如何使用按钮（代码示例） _materialize.min.js

按钮组件及其内部的链接可能是最重要的功能之一, 它允许用户与网页进行交互并执行各种功能, 并从一个网页移动到另一个网页。以下是定义的各种按钮及其效果：

提高：它用于设置波纹点击效果, 也可以与其他各种类别组合使用。
< a class="waves-effect waves-light btn"> button< /a> < a class="waves-effect waves-light btn"> < i class="material-icons left"> list< /i> button< /a> < a class="waves-effect waves-light btn"> < i class="material-icons right"> list< /i> button< /a>

浮动：用于创建圆形按钮。
< a class="btn-floating btn-large waves-effect waves-light red"> < i class="material-icons"> edit< /i> < /a>

平面：用于将平面显示效果设置为按钮, 以减少过多的分层。例如, 平面按钮通常用于卡片中的操作, 以免重叠阴影过多。
< a class="waves-effect waves-teal btn-flat"> Button< /a>

提交按钮：它用来表示为主按钮。使用按钮提交表单时, 可以使用类型为Submit的按钮标签代替输入标签。
< button class="btn waves-effect waves-light" type="submit" name="action"> Submit < i class="material-icons right"> send< /i> < /button>

大：它用于需要更多注意的按钮。
< a class="waves-effect waves-light btn-large"> Button< /a> < a class="waves-effect waves-light btn-large"> < i class="material-icons left"> list< /i> button< /a> < a class="waves-effect waves-light btn-large"> < i class="material-icons right"> list< /i> button< /a>

小：当鼠标和键盘是主要输入方法时使用, 此按钮用于更密集的UI布局。

< a class="waves-effect waves-light btn-small"> Button< /a> < a class="waves-effect waves-light btn-small"> < i class="material-icons left"> list< /i> button< /a> < a class="waves-effect waves-light btn-small"> < i class="material-icons right"> list< /i> button< /a>

禁用：用于创建禁用按钮。

< 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="material-icons"> edit< /i> < /a>

例子：
的HTML

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js" > < / script > < !--Let browser know website is optimized for mobile--> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body > < div class = "card-panel" > < h3 > Raised Button< / h3 > < a class="waves-effect waves-light btn green"> button< / a > < a class="waves-effect waves-light btn green"> < i class="material-icons left"> list< / i > button< / a > < a class="waves-effect waves-light btn green"> < i class="material-icons right"> list< / i > button< / a > < / div > < div class = "card-panel" > < h3 > Floating Button< / h3 > < a class="btn-floating btn-large waves-effect waves-light teal"> < i class = "material-icons" > edit< / i > < / a > < / div > < div class = "card-panel" > < h3 > Flat Button< / h3 > < a class="waves-effect waves-green btn-flat"> Button< / a > < / div > < div class = "card-panel" > < h3 > Submit Button< / h3 > < button class="btn green waves-effect waves-light" type = "submit" name = "action" > Submit < i class = "material-icons right" > send< / i > < / button > < / div > < div class = "card-panel" > < h3 > Large Button< / h3 > < a class="waves-effect waves-light btn-large green"> Button< / a > < a class="waves-effect waves-light btn-large green"> < i class = "material-icons left" > list< / i > button < / a > < a class="waves-effect waves-light btn-large green"> < i class="material-icons right"> list< / i > button< / a > < / div > < div class = "card-panel" > < h3 > Small Button< / h3 > < a class="waves-effect waves-light btn-small green white-text"> Button< / a > < a class="waves-effect waves-light btn-small green white-text"> < i class = "material-icons left" > list< / i > button< / a > < a class="waves-effect waves-light btn-small green white-text"> < i class = "material-icons right" > list< / i > button< / a > < / div > < div class = "card-panel" > < h3 > Disabled Button< / h3 > < 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 = "material-icons" > edit< / i > < / a > < / div > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

【materialize CSS如何使用按钮（代码示例）】输出如下：