Material Design 按钮是一种现代化的设计模式，它为用户提供了极致的视觉体验并且具有全平台的美观一致性。在本文中，我们将详细讨论 Material Design 按钮的使用方法以及在实际开发中的应用。
Material Design 介绍
Material Design 是谷歌在 2014 年推出的一种设计语言，旨在为开发者提供一种灵活、高效、简单而又现代化的设计体验。这种设计风格注重材质感，通过预设的元素和交互原则来创建具有层次感的触觉和视觉效果。Material Design 帮助开发者创建具有现代感和专业感的网页和应用程序。
Material Design 按钮的特点
Material Design 按钮是一个常用元素，具有以下特点：
- 彩色按钮：Material Design 按钮有多个颜色可供选择，可以根据你的设计需要自由更改。
- 阴影效果：按钮具有逼真的阴影效果，让按钮看起来更加立体化。
- 按下效果：当用户按下按钮时，按钮增加了微小的交互效果，增加了用户的体验感。
Material Design 按钮的使用方法
HTML 代码
在 HTML 代码中，按照以下结构创建 Material Design 按钮：
<button class="md-button md-button-primary">Primary</button>
上述代码中使用 button 标签创建按钮，第一个 class 属性为 md-button 代表这是 Material Design 按钮，第二个 class 属性为 md-button-primary 代表这是一个彩色按钮，这里使用的是 primary 颜色。
CSS 代码
在 CSS 代码中，使用以下代码引入 Material Design 按钮的样式库：
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/bootstrap-material-design.css"> <link rel="stylesheet" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/ripples.min.css">
上述代码中首先引入了 Material Design icons 库，然后分别引入了 bootstrap-material-design 和 ripples.min.css 两个库。
JavaScript 代码
在 JavaScript 代码中，使用以下代码引入 Material Design 按钮的 JavaScript 库：
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/material.js"></script> <script src="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/master/dist/js/ripples.min.js"></script>
上述代码中首先引入了 jQuery 库，然后分别引入了 material.js 和 ripples.min.js 两个库。
使用示例
下面给出一组 Material Design 按钮的使用示例：
<button class="md-button md-button-primary">Primary</button> <button class="md-button md-button-secondary">Secondary</button> <button class="md-button md-button-success">Success</button> <button class="md-button md-button-warning">Warning</button> <button class="md-button md-button-danger">Danger</button> <button class="md-button md-button-inverse">Inverse</button>
上述代码中展示了 Material Design 按钮的彩色样式库，开发者可以根据自己的需求自由调整按钮的颜色。
Material Design 按钮的应用实例
在 Web 应用程序中应用 Material Design 按钮
下面是 Material Design 按钮的应用实例，我们将在 Web 应用程序中使用 Material Design 按钮。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ --------------
----- ---------------- ----------------------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------------------------------------------------------
----- ---------------- --------------------------------------------------------------------------------------------------
-------
------
---- ------------------------
---- ------------
---- -----------------
------------ ------ -----------
----
-------------
---- -------------------
------- ---------------- -----------------------------------
------- ---------------- ---------------------------------------
------- ---------------- -----------------------------------
------- ---------------- -----------------------------------
------- ---------------- ---------------------------------
------- ---------------- -----------------------------------
------
------
------
------
------- -----------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------
--------
------------------
---------
-------
-------上述代码中展示了 Material Design 按钮的实际应用效果，我们在 Web 应用程序中创建了一组彩色按钮，增加了应用程序的现代感和专业感，为用户提供了更好的使用体验。
总结
本文详细介绍了 Material Design 按钮的用法和在 Web 应用程序中的应用实例。Material Design 按钮具有彩色、阴影、按下效果等特点，可以为你的应用程序增加现代化的设计感。在实际使用中，只需要按照 HTML、CSS 和 JavaScript 中的代码结构创建元素、样式和交互即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654c8f3e7d4982a6eb605c5f