Material Design 风格是 Google 推出的一种设计规范，旨在提供一种简约、直观、有层次感的设计风格，让用户能够更加轻松地理解和使用应用程序。在 Material Design 中，Button 是一个非常重要的组件，它能够提供用户互动的方式，例如提交表单、触发事件等。本文将介绍在 Material Design 风格下如何自定义修改 Button 样式的方法。
1. Material Design Button 样式
Material Design 中的 Button 样式有三种基本类型：Raised Button、Flat Button 和 Floating Action Button。其中，Raised Button 和 Flat Button 是常用的两种类型，它们分别代表了凸起和扁平的按钮样式。Floating Action Button 则是一种特殊的按钮，通常用于应用程序的主要操作。
1.1 Raised Button 样式
Raised Button 样式是一种凸起的按钮样式，它通常用于突出应用程序的主要操作，例如提交表单、保存数据等。Raised Button 样式具有以下特点：
- 有阴影和圆角边框；
- 按钮背景为填充的颜色；
- 按钮文字为白色。
Raised Button 样式的代码如下所示：
<button class="mdc-button mdc-button--raised"> Submit </button>
1.2 Flat Button 样式
Flat Button 样式是一种扁平的按钮样式，它通常用于次要的操作，例如取消、返回等。Flat Button 样式具有以下特点：
- 没有阴影和圆角边框；
- 按钮背景为透明；
- 按钮文字为填充的颜色。
Flat Button 样式的代码如下所示：
<button class="mdc-button mdc-button--outlined"> Cancel </button>
1.3 Floating Action Button 样式
Floating Action Button 样式是一种浮动的按钮样式，它通常用于应用程序的主要操作，例如添加、新建等。Floating Action Button 样式具有以下特点：
- 有阴影和圆角边框；
- 按钮背景为填充的颜色；
- 按钮文字为白色；
- 按钮为圆形。
Floating Action Button 样式的代码如下所示：
<button class="mdc-fab">
<span class="mdc-fab__icon">
<i class="material-icons">add</i>
</span>
</button>2. 自定义修改 Button 样式
在实际开发中，我们可能需要根据项目的需求对 Button 样式进行自定义修改。下面介绍两种常见的自定义修改方法。
2.1 修改颜色
修改 Button 样式的颜色是一种常见的自定义修改方法。我们可以通过修改按钮背景色、文字颜色等来实现。例如，我们需要将 Raised Button 的背景色修改为蓝色，文字颜色修改为白色，代码如下所示：
.mdc-button--raised {
background-color: blue;
color: white;
}2.2 修改形状
修改 Button 样式的形状也是一种常见的自定义修改方法。我们可以通过修改按钮的圆角大小、边框宽度等来实现。例如，我们需要将 Raised Button 的圆角大小修改为 8px，边框宽度修改为 2px，代码如下所示：
.mdc-button--raised {
border-radius: 8px;
border-width: 2px;
}3. 总结
本文介绍了 Material Design 风格下自定义修改 Button 样式的方法，包括 Raised Button、Flat Button 和 Floating Action Button 三种基本类型。我们可以通过修改颜色、形状等来实现自定义修改。希望本文能够对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f2caeb2b3ccec22fb645a9