按钮是Web前端开发中最基本的元素之一，同时也是用户与网站之间互动的最主要方式。因此，如何设计按钮样式，不仅关系到网站整体的美观度，还直接关系到用户的体验。Material Design Lite 作为一套基于 Google Material Design 设计规范的前端框架，提供了丰富而又美观的按钮样式，通过对其样式设计的深入分析和总结，可以为低调而高效的按钮样式设计提供指引与借鉴。
按钮类型的选择
在 Material Design Lite 框架中，按钮基本上可以分为“主要操作按钮”、“次要操作按钮”以及“浮动操作按钮”三类，根据不同的功能需求，我们可以选择不同的按钮类型。
主要操作按钮
主要操作按钮在 Material Design Lite 框架中被称为“Raised Button”，作为网站的主要交互方式，通常被设置在最突出的位置，例如页面的中心或者顶部。Raised Button 的样式通常是圆角矩形，带有3D效果的凸起感，一般采用明亮的颜色作为按钮的底色，以突出按钮的视觉效果。Raised Button 适合用于网站中的重要操作，例如登录、注册、购买等功能。
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Raised Button </button>
次要操作按钮
次要操作按钮在 Material Design Lite 框架中被称为“Flat Button”，相对于 Raised Button，Flat Button 更加低调。Flat Button 的样式同样是圆角矩形，但没有 Raised Button 的3D效果，只有浅色底色以及稍微快几个像素的阴影。在网站中，Flat Button 一般被用于较为次要的操作，例如取消、删除、返回等。
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Raised Button </button>
浮动操作按钮
浮动操作按钮在 Material Design Lite 框架中被称为“Floating Action Button”，通常被设置在页面的右下角，是一种全局的快速操作入口。浮动操作按钮的样式通常是圆形带有图标，可以通过设置鼠标移入时的动态效果来吸引用户的注意力。浮动操作按钮一般用于网站中的常用操作，例如短信、拨打电话、新建邮件等。
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect"> <i class="material-icons">add</i> </button>
按钮样式的设计
除了按钮的类型选择之外，按钮的样式设计也是一个需要注意的地方。Material Design Lite 提供了多种不同的样式选择，来满足不同网站设计的需求。下面，我们将从以下几个方面来介绍 Material Design Lite 中的按钮样式设计。
按钮的颜色选择
按钮的底色是按钮样式设计中一个非常重要的方面，不同的底色可以通过颜色的对比度提高按钮的醒目程度，从而提高用户的点击率。Material Design Lite 框架中提供了多种颜色选择，分别包括主色、辅助色以及等分色。
- 主色：主色是网站整体品牌色，通常由用户自定义，用于显示按钮的底色。主色有多种颜色可供选择，可以根据网站风格的不同进行调整。
- 辅助色：辅助色是用于页面内其他元素的颜色，通常被用于链接、边框等元素中。
- 等分色：等分色是主色的不同亮度或深度的变化，用于改变按钮底色的亮度和深度，提高按钮的对比度。
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">Primary</button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Accent</button> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Colored</button>
按钮的大小选择
按钮大小也是按钮样式设计中一个重要的方面之一，适当的大小可以提高按钮的易点性，同时也需要考虑页面排版以及用户的操作需求。
Material Design Lite 框架中提供了多种大小的按钮，分别包括标准按钮、小按钮以及大按钮。
<button class="mdl-button mdl-js-button">Standard</button> <button class="mdl-button mdl-js-button mdl-button--small">Small</button> <button class="mdl-button mdl-js-button mdl-button--large">Large</button>
总结
按钮作为 Web 前端开发中最基本的元素之一，其样式设计不仅关系到网站整体的美观度，还直接关系到用户的体验。本文从 Material Design Lite 框架的按钮样式设计中总结了按钮类型的选择、按钮样式的设计以及按钮的大小选择等方面，为我们在 Web 前端开发中设计低调而高效的按钮样式提供了指引和借鉴。
参考代码如下：
-- -------------------- ---- ------- ------- ----------------- ------------- ------------------ ------------------------------------- ------- ----------------- ------------- ------------------ ----------------------------------- ------- ----------------- ------------- ------------------ ------------------------------------- ------- ----------------- -------------------------------- ------- ----------------- ------------- --------------------------------- ------- ----------------- ------------- --------------------------------- ------- ----------------- ------------- --------------- ---------------------- -- ------------------------------ ---------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6453abb4968c7c53b07ed947