如何使用 CSS 制作有吸引力的按钮答案

【问题标题】：How to make attractive button using CSS如何使用 CSS 制作有吸引力的按钮
【发布时间】：2018-01-10 18:05:22
【问题描述】：

请查看这些屏幕截图。现在我想用第一张图片替换第二张图片的登录按钮的背景颜色。

谁能提供代码？

我的代码是：

buttonContainer: {
  backgroundColor: '#9ce8d3';
  paddingVertical: 12;
  borderRadius: 5;
  marginTop: 25;
}

【问题讨论】：

先显示一些努力 ;)
我们需要你的代码，而不是截图
已经-6，我建议您编辑您的帖子并学习一些基础 CSS
我会推荐gradients，加上正确的颜色组合
现在来看看吧。

标签： css

【解决方案1】：

你的一些代码会更好。

但您可以只使用具有正确颜色的渐变生成器，例如 this one。

所以你可以有类似的东西：

background: #3dbeb2;
background: -moz-linear-gradient(left, #3dbeb2 0%, #02b5d1 100%);
background: -webkit-linear-gradient(left, #3dbeb2 0%,#02b5d1 100%);
background: linear-gradient(to right, #3dbeb2 0%,#02b5d1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3dbeb2', endColorstr='#02b5d1',GradientType=1 );

编辑：没有看到您的代码编辑。

【讨论】：

【解决方案2】：

我认为您不需要任何渐变，只需要一个简单的背景颜色十六进制值。

背景颜色为#32b9cd

.button {
  /* colors */
  color: white;
  background-color: #32b9cd;

  /* positioning */
  padding: 12px;
  margin-top: 25px;
  width: 200px;
  height: 25px;
  margin: auto;

  /* font styling */
  font-size: 20px;
  line-height: 25px;
  font-family: Arial, sans-serif;
  text-align: center;
  
  /* curve on borders */
  border-radius: 5px;
}

&lt;div class="button"&gt;LOG IN&lt;/div&gt;

【讨论】：