Material Design 是 Google 设计的一种界面设计语言，广泛应用于各种应用和网站的设计中。其中，按钮是页面中常用的交互元素之一，因此设计出好看且易用的按钮显得尤为重要。在本文中，我们将介绍一系列 Material Design 风格的 CSS 按钮，帮助前端开发者设计出优秀的按钮。
基础按钮
代码：
<button class="btn">基础按钮</button>
-- -------------------- ---- -------
---- -
-------- --- -----
-------------- ----
------- -----
----------------- --------
------ --------
---------- -----
------------ -----
--------------- ----------
--------------- -------
----------- - --- --- ------- -- -- ------
- --- --- ------- -- -- ------ - --- --- ---- ------- -- -- -----
----------- ---------- ----- ----------------- -- ---- ---
-
---------- -
----------- - ---- ---- ----- ------- -- -- -----
- --- ---- --- ------- -- -- ------
- --- ---- ---- ------- -- -- -----
-效果如下：
这是一个简单的平面风格按钮，应用了 Material Design 中的基础元素。我们使用了统一的字体、字号、颜色和阴影来体现视觉层次感和设计一致性。按钮具有响应式能力，使得按钮在鼠标悬浮时可以产生动态阴影效果。
透明按钮
代码：
<button class="btn btn-transparent">透明按钮</button>
-- -------------------- ---- ------- ---------------- - ----------------- ------------ ------ -------- ----------- ----- ------- --- ----- -------- - ---------------------- - ----------------- -------- --- ---- ------ ----------- ----- -
效果如下：
透明按钮与基础按钮相比区别在于颜色和阴影。为了使按钮整体体现扁平化风格，我们将按钮背景色设为透明。边框及文字颜色为 Material Design 中的标准颜色，使按钮在透明的幕布上非常显眼。
文字按钮
代码：
<button class="btn btn-text">文字按钮</button>
-- -------------------- ---- ------- --------- - ----------------- ------------ ------ -------- ----------- ----- -------- -- ---------- -------- --------------- ----- --------------- ------- - --------------- - ----------------- -------- --- ---- ------ ----------- ----- -
效果如下：
文字按钮采用了类似于链接的形式，使按钮看上去更加的轻盈。同样采用了标准颜色，辅之以松散的静态阴影，并在鼠标悬浮时增加灵动的动态效果。
圆形按钮
代码：
<button class="btn btn-circle">圆形按钮</button>
-- -------------------- ---- -------
----------- -
------ -----
------- -----
-------------- ----
----------------- --------
------ --------
----------- - --- --- ------- -- -- ------
- --- --- ------- -- -- ------ - --- --- ---- ------- -- -- -----
---------- -----
----------- -------
-------- -------------
--------------- -------
------------ -----
------- --------
----------- ---------- ----- ----------------- -- ---- ---
-
----------------- -
----------- - ---- ---- ----- ------- -- -- -----
- --- ---- --- ------- -- -- ------
- --- ---- ---- ------- -- -- -----
-效果如下：
圆形按钮是 Material Design 中常用的一种形式，具有简明易懂的视觉效果。我们切换了形状和字号，同时使按钮颜色更亮眼，以用于各种重要的场合。按钮还采用了动态阴影以增加交互体验。
带图标的按钮
代码：
<button class="btn btn-icon"> <i class="material-icons">home</i> <span>带图标的按钮</span> </button>
-- -------------------- ---- -------
--------- -
-------- --- -----
-------------- ----
------- -----
----------------- --------
------ --------
---------- -----
------------ -----
--------------- ----------
--------------- -------
----------- - --- --- ------- -- -- ------
- --- --- ------- -- -- ------ - --- --- ---- ------- -- -- -----
-------- ------------
------------ -------
---------------- -------
------- --------
----------- ---------- ----- ----------------- -- ---- ---
-
--------- - -
------------- ----
---------- -----
-
--------------- -
----------- - ---- ---- ----- ------- -- -- -----
- --- ---- --- ------- -- -- ------
- --- ---- ---- ------- -- -- -----
-效果如下：
带图标的按钮是一种常见的形式，常常应用于导航和特定操作。我们在按钮内嵌入了 Material Design 风格的图标，并根据图标形状和字号适当调整按钮的大小。同样，按钮扁平化，具有响应式能力，并在悬浮时产生动态阴影。
按钮组
代码：
<div class="btn-group"> <button class="btn btn-active">按钮一</button> <button class="btn">按钮二</button> <button class="btn">按钮三</button> </div>
.btn-group {
display: flex;
justify-content: space-between;
}
.btn-active {
background-color: #4caf50;
}效果如下：
按钮组是由多个按钮按照一定布局方式组合而成的。我们可以利用 CSS 中的 Flexbox 布局技术轻松实现这种布局方式。在按钮组中，我们增加了一个 .btn-active 类表示按钮组的默认状态。在这个例子中，我们将第一个按钮作为默认处于激活状态的按钮，使用绿色背景色的方式来凸显它。
总结
本文展示了六个 Material Design 风格的按钮样式，可以供开发者们使用或参考，并依据实际需要进行定制。同时，我们通过这些按钮样式的设计与实现，可以学习到如何通过响应式设计、阴影、颜色搭配以及图标等元素来打造一个好看且易用的按钮。希望这些样式能够对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488b98348841e989471e816