如何创建一个渐变到多个按钮，如谷歌加发现按钮

Question

我一直在做一个项目，该项目包含一些按钮，与Google plus按钮的工作方式相同，我想以相同的方式对它们进行样式设置，从一个渐变到所有按钮，

请帮帮我。

检查按钮。https://plus.google.com/discover/

https://i.stack.imgur.com/q8MXJ.jpg

Answer 1

我不确定谷歌是如何做到的，但我会使用固定的渐变背景。

background: linear-gradient(-90deg, red, yellow);为按钮添加了一个标准的渐变背景，从红色到黄色，你可以使用任何你喜欢的颜色。

background-attachment: fixed;将背景固定在适当的位置，以便所有div都位于相同的位置。

这将适用于所有不同长度的按钮，但对于本例，我使用固定长度。

.button {
float: left;
background: linear-gradient(-90deg, red, yellow);
background-attachment: fixed;
width: 150px;
height: 50px;
margin-right: 20px;
border-radius: 25px;
}

<div class="button"></div>
<div class="button"></div>
<div class="button"></div>

Answer 2

要达到这种效果，必须使用css渐变
您没有我们可以向您展示的一些代码，请在此处阅读更多信息：https://www.w3schools.com/css/css3_gradients.asp