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

Question

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

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

我的代码是：

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

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

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