Material Design 是 Google 推出的一套设计语言，它为多平台提供了一致的设计规范和指南。其中，按钮是 Material Design 中比较重要的组件之一。本文将介绍如何实现自定义 Material Design 按钮的样式。
Material Design 按钮的基本样式
在实现自定义样式之前，先来看一下 Material Design 按钮的基本样式。在 HTML 代码中，一个 Material Design 按钮通常是这样定义的：
<button class="mdc-button"> <span class="mdc-button__label">Button</span> </button>
其中，.mdc-button 是按钮的容器元素，.mdc-button__label 是按钮的文本内容。参考 Material Design 的指南，.mdc-button 的样式需要设置为以下样式：
-- -------------------- ---- -------
----------- -
-------- ------------
------------ -------
---------------- -------
------- -----
-------- --- -----
------- -----
-------------- ----
---------- -----
------------ ----
------------ -----
--------------- ----------
--------------- ----------
----------------- -----
------ --------
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
- --- --- ------- -- -- ------ - --- --- ------- -- -- ------
- ---- ---- ------- -- -- ------
-这些样式定义了按钮的基本外观和行为，包括容器的尺寸、内边距、边框、圆角、字体样式、背景色、文本颜色以及阴影效果。这样我们就可以得到一个简单的 Material Design 按钮。
实现自定义样式
如果要自定义样式，我们可以通过覆盖 .mdc-button 的某些属性来实现。例如，要修改按钮的背景色，可以设置如下样式：
.mdc-button {
background-color: #ff5722;
}这样就可以将按钮的背景色修改为橙色。
如果要添加动画效果，可以使用 CSS3 动画属性，在 .mdc-button 中添加如下样式：
.mdc-button {
transition: background-color 0.3s ease-out;
}
.mdc-button:hover {
background-color: #ff5722;
}这样就可以实现按钮鼠标悬停时背景色渐变的效果。
如果要添加图标，可以在 .mdc-button 中添加一个 <i> 元素，例如：
<button class="mdc-button"> <i class="material-icons">favorite</i> <span class="mdc-button__label">Like</span> </button>
然后通过修改 .mdc-button i 的样式来设置图标的样式。
如果要添加阴影效果，可以参照原始样式中的 box-shadow，进行修改。
以上仅仅是对 Material Design 按钮自定义样式的一个简单介绍，更多样式特性可以参考 Material Design 的文档 https://material.io/design/components/buttons.html。
示例代码
下面提供一个简单的示例代码，实现了一个带动画效果的 Material Design 按钮：
<button class="mdc-button mdc-button_animate"> <i class="material-icons">favorite_border</i> <span class="mdc-button__label">Like</span> </button>
-- -------------------- ---- -------
----------- -
-------- ------------
------------ -------
---------------- -------
------- -----
-------- --- -----
------- -----
-------------- ----
---------- -----
------------ ----
------------ -----
--------------- ----------
--------------- ----------
----------------- -----
------ --------
----------- - --- --- ------- -- -- ------ - --- --- ------- -- -- ------
- --- --- ------- -- -- ------ - --- --- ------- -- -- ------
- ---- ---- ------- -- -- ------
-
------------------- -
----------- ---------------- ---- ---------
-
----------------- -
----------------- --------
-
------------------ -
------------ ----
-
----------- - -
---------- -----
-总结
自定义 Material Design 按钮的样式可以为我们的网站或应用程序增加美观的视觉效果，并且让按钮更符合品牌标识等要求，是很有必要的。本文介绍了一些基本样式以及自定义样式的方法，并给出了示例代码。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b1f4d968c7c53b0d7c78a