Material Design 是由 Google 推出的一种设计风格，其核心思想是将设计与技术相融合，提供一种优雅、一致和直观的体验。按钮是 Material 设计中的重要组件，多种形状的按钮样式可以给用户带来更加丰富的交互体验。本篇文章将介绍如何在 Material Design 中实现多形状按钮样式。
1. 矩形按钮
矩形按钮在 Material Design 中是最基本的样式，它可以通过以下代码实现：
<button class="mdc-button mdc-button--raised"> 完成 </button>
其中 mdc-button 是按钮的基础样式，mdc-button--raised 表示按钮是一个凸起的矩形。除了 raised，Material Design 还提供了许多其他属性，可以实现不同的矩形按钮样式，例如：
unelevated：表示按钮是一个平面矩形。outlined：表示按钮是一个带边框的矩形。
2. 圆形按钮
圆形按钮在 Material Design 中可以通过以下代码实现：
<button class="mdc-fab">
<span class="mdc-fab__icon">
<i class="material-icons">add</i>
</span>
</button>其中 mdc-fab 是圆形按钮的基础样式。如果需要在按钮中加入图标，可以在 button 标签内部嵌套一个 span 标签，并使用 mdc-fab__icon 样式对其进行修饰。加入图标后，还需要引用 Material Icons 字体库，使用 <i> 标签来表示图标。
圆形按钮还有一些其他的样式可以实现，例如：
mdc-fab--extended：表示按钮是一个带有文本的扩展圆形按钮。mdc-fab--mini：表示按钮是一个小型圆形按钮。
3. 不规则形状按钮
除了矩形和圆形按钮之外，Material Design 还支持使用 SVG 实现不规则形状的按钮。通过使用 SVG，可以创造出更加个性化的按钮样式。
<button class="mdc-button mdc-button--custom">
<span class="mdc-button__ripple"></span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90 50L50 10V35H35v30H50v25z"/>
</svg>
自定义按钮
</button>其中 mdc-button--custom 表示按钮是一个自定义形状的按钮。需要在按钮中嵌套一个 svg 标签，并在其中定义 path 标签来绘制按钮的形状。需要注意的是，在绘制 path 标签时，需要使用 SVG Path 语法。
4. 总结
通过本文的介绍，我们了解了 Material Design 中不同形状的按钮样式的实现方法，并且给出了示例代码。通过深入学习 Material Design，我们可以更好地实现优雅、一致和直观的交互体验，提升 Web 应用的用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594d13feb4cecbf2d914620