Material Design 是 Google 推出的一种设计语言，它以平面化、简洁的设计风格和自然的动画效果为特点，被越来越多的网站和应用程序采用。其中，按钮是 Material Design 风格中不可或缺的一部分。本文将介绍如何使用纯 CSS 实现 Material Design 风格的按钮。
步骤一：制作基础按钮样式
首先，我们需要创建一个基础按钮样式。这个样式将作为我们后面创建各种不同样式的基础。
-- -------------------- ---- ------- ---- - -------- ------------- -------- ------ ----- ------- ----- -------------- ---- ------ ----- ---------- ----- ------------ ---- ----------- ------- ---------------- ----- ----------------- -------- ----------- - --- --- ------- -- -- ------ ----------- ---------------- ---- ----- -
这个样式包括了按钮的基本样式，如圆角、字体颜色、背景颜色、阴影等。同时，我们也添加了一个过渡效果，使按钮在鼠标悬停时能够有一个平滑的过渡。
步骤二：创建不同类型的按钮
在 Material Design 风格中，按钮有不同的类型，如扁平化按钮、凸起按钮、浮动按钮等。下面我们将介绍如何使用纯 CSS 实现这些不同类型的按钮。
扁平化按钮
扁平化按钮是 Material Design 风格中最基本的按钮样式。它没有任何的立体感，只有简单的颜色和文本。
.btn-flat {
background-color: transparent;
box-shadow: none;
}我们只需要将按钮的背景颜色设置为透明，阴影设置为无，就可以创建一个扁平化按钮。
凸起按钮
凸起按钮是指按钮的底部和右侧有一个凸起的效果，使其看起来更有立体感。我们可以使用伪元素来实现这个效果。
-- -------------------- ---- ------- ----------- - --------- --------- --------- ------- - ------------------ - -------- --- --------- --------- ------- -- ------ -- ------ -- ------- -- ----------------- --------- ---- ---- ----- ----------- ----- ---- ----- ------ ---- ----- - ------------------------ - ------ ----- ------- ----- -
我们将按钮设置为相对定位，并使用 overflow: hidden; 隐藏超出按钮的部分。然后，我们创建一个伪元素，它将被放置在按钮的底部和右侧。我们将它的背景颜色设置为半透明白色，然后在鼠标悬停时将其宽度和高度设置为 100%，从而实现凸起的效果。
浮动按钮
浮动按钮是 Material Design 风格中比较特殊的一种按钮，它通常用于页面的主要操作。我们可以使用绝对定位来创建一个浮动按钮。
-- -------------------- ---- ------- ------------- - --------- --------- ------ ----- ------- ----- ------ ----- ------- ----- -------------- ---- ----------------- -------- ----------- - --- --- ------- -- -- ------ ----------- ---------------- ---- ----- - ------------- - - ---------- ----- ------------ ----- ----------- ------- -
我们将按钮设置为绝对定位，并将其放置在页面的右下角。我们还将按钮的宽度和高度设置为 3rem，并将其边框半径设置为 50%，从而使其成为一个圆形按钮。最后，我们在按钮中添加一个字体图标，使其看起来更加美观。
结论
在本文中，我们介绍了如何使用纯 CSS 实现 Material Design 风格的按钮。我们创建了一个基础按钮样式，并使用它创建了不同类型的按钮，如扁平化按钮、凸起按钮和浮动按钮。通过学习这些技巧，您可以更好地掌握 CSS 的使用，并创建出更加美观、实用的按钮。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67564cd83af3f99efe5a3266