Material Design 是 Google 推出的一种现代化设计语言，提供了统一的视觉体验和交互设计规范，旨在帮助开发者构建现代化的 Web 应用程序和移动应用程序。在 Material Design 中，Button 是最常见的 UI 元素之一，而正方形圆角 Button 也是其中一种经常出现的按钮风格。本文将介绍如何使用 Material Design 实现正方形圆角 Button，并提供示例代码。
利用 CSS3 的 border-radius 属性实现 Button 圆角
实现正方形圆角 Button 的其中一种方式是利用 CSS3 的 border-radius 属性。border-radius 属性控制元素的边框角度，将边框角度设置为值等于元素高度一半的像素值，就可以实现正方形圆角 Button 效果。
button {
border-radius: 20px;
height: 40px;
}代码中，我们将 border-radius 属性设置为 20px，让按钮四个角变成圆形。按钮高度设置为 40px，这样可以让按钮高度的一半等于 20px，从而达到按钮边框半径的效果。这种方式的实现可以通过 CSS3 直接设置边框半径属性来实现效果。
然而，由于边框半径是基于高度计算的，因此当按钮的宽度和高度不相同时，会出现宽高不协调的问题。此外，图标或文本在按钮中央时，它们可能会在按钮用户点击视觉反馈时与较小的按钮边缘重叠，这虽然不会影响用户的使用，但是会降低 UI 界面的美观性。
使用 Material Design 实现正方形圆角 Button
使用 Material Design 中的 Button 实现正方形圆角 Button，可以保证按钮符合 Material Design 规范，并且没有按钮设置宽度高度的限制。在 Material Design 中，Button 会自动适应内容的宽度高度，只需按照以下方式进行设置。
<button class="mdc-button mdc-button--raised"> <span class="mdc-button__label">Button</span> </button>
代码中，我们使用 MDC-Web 库提供的 Button 样式，包括 ".mdc-button" 和 ".mdc-button--raised" 这两个样式类。其中 ".mdc-button--raised" 将 Button 设定为凸出状态，与平面状态的 ".mdc-button--unelevated" 和凹陷状态的 ".mdc-button--outlined" 不同。
MDC-Web 库是一个基于 Material Design 的开源 UI 库，其中包含多种 UI 组件，可以在 MDC-Web 文档中查看或者直接在 GitHub 上下载使用。使用 Material Design 的 Button 实现正方形圆角 Button，可以确保应用程序 UI 界面符合 Material Design 规范，使界面更美观和易于识别。
使用 SASS 定制 Button 样式
如果需要更加自定义的样式，可以使用 SASS（Syntactically Awesome Style Sheets）来定义 Button 样式。SASS 是一种 CSS 预处理器，可以使得开发者写出更加简洁和易于维护的 CSS 代码。
-- -------------------- ---- -------
------- ------------------------------
------------------- -----
-------------------------- ------------------ - --
----------------------------- --------
------------------ --------
------------------ -
-------- -
------- --
-
--------- -
----------------- -----------------------------
------ ------------------
-------------- --------------------------
------- -------------------
-
-代码中，我们使用了 @import 指令导入了 MDC-Web 库中 Button 样式，然后定义了一些 SASS 变量，使得样式更加可定制化。接着，我们定义了一个名为 ".mdc-custom-button" 的样式，其中包含子类 ".mdc-custom-button__label"、".mdc-custom-button--raised"，用于控制 Button 文字和样式。完成定制样式后，使用以下代码来创建自定义 Button。
<button class="mdc-custom-button mdc-button--raised"> <span class="mdc-custom-button__label">Custom Button</span> </button>
代码中，我们使用了 ".mdc-custom-button" 样式来设置 Button 的形状和颜色，实现一个独特的、美观的自定义 Button。
总结
使用 Material Design 实现正方形圆角 Button 是一种实现美观、易用的方式。当然，可以使用 CSS3 和 SASS 等工具有更多可控性的定制化。Web 开发者可以根据自己的需求来选择具体实现方式，从而能够开发出支持 Material Design 的高质量 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f098e7f6b2d6eab3aa0900