MDL提供了一系列CSS类，可以对按钮应用各种预定义的视觉和行为
增强功能.下表列出了可用的类及其
效果.
| Sr.No. | Class Name&描述 |
|---|---|
| 1 | mdl-button 将按钮设置为MDL组件，是必需的. |
| 2 | mdl-js-button 向按钮添加基本MDL行为，必需. |
| 3 | (无) 将平面显示效果设置为按钮，默认为. |
| 4 | mdl-button - raise 设置提升的显示效果;这与fab，mini-fab和icon互斥. |
| 5 | mdl-button - fab 集fab(圆形)显示效果;这与凸起的迷你工厂和图标是互斥的. |
| 6 | mdl-button - mini-fab 设置mini-fab(小型圆形)显示效果;这与凸起，制作和图标互斥. |
| 7 | mdl-button - icon 设置图标(小平圆形)显示效果;这与凸起的，晶圆厂和迷你晶圆厂是互斥的. |
| 8 | mdl-button - 着色 集彩色显示效果，其中颜色在material.min.css中定义. |
| 9 | mdl-button - primary 设置主要颜色显示效果，其中颜色在material.min.css中定义. |
| 10 | mdl-button - accent 设置重音颜色显示效果，其中颜色在material.min.css中定义. |
| 11 | mdl-js-ripple-effect 设置涟漪点击效果，可与任何其他类组合使用. |
以下示例将帮助您了解使用 mdl-button 类来显示不同类型的按钮.
<html> <head> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <table border = "0"> <tbody> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Colored fab (circular) display effect</td> <td>Colored fab (circular) with ripple display effect</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Plain fab (circular) display effect</td> <td>Plain fab (circular) with ripple display effect</td> <td>Plain fab (circular) and disabled</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--raised"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Raised button</td> <td>Raised button with ripple display effect</td> <td>Raised button and disabled</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Colored Raised button</td> <td>Accent-colored Raised button</td> <td>Accent-colored raised button with ripple effect</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button" disabled> <i class = "material-icons">add</i></button></td> </tr> <tr> <td>Flat button</td> <td>Flat button with ripple effect</td> <td>Disabled flat button</td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--primary"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--accent"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Primary Flat button</td> <td>Accent-colored Flat button</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--icon"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Icon button</td> <td>Colored Icon button</td> <td> </td> </tr> <tr> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab"> <i class = "material-icons">add</i></button></td> <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"> <i class = "material-icons">add</i></button></td> <td> </td> </tr> <tr> <td>Mini Colored fab (circular) display effect</td> <td>Mini Colored fab (circular) with ripple display effect</td> <td> </td> </tr> </tbody> </table> </body> </html>
