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

Question

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

任何人都可以提供代码吗？

我的代码是：

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

Answer 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 );

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

Answer 2

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

背景颜色为#32b9cd

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;