Question

我必须将渐变应用于按钮以及以下内容。

对于按钮的正常状态，我想使用

Top gradient from #0069A6 to #0078C0

Bottom gradient from #005F96 to #004085

对于按钮的悬停状态，我想使用

Top gradient from #02356A to #024183

Bottom gradient from #002147 to #01152D

对于点击按钮状态，我想使用

Top gradient from #004085 to #005F96

Bottom gradient from #0078C0 to #0069A6

我尝试过以下代码。

HTML

<button type="button" class="button_color">
Make Payment

CSS

.button_color{
    height:40px;
    border-radius:10px;
    color:white;
    background: linear-gradient(to bottom,#005F96 10%,#004085 10%);
    background: linear-gradient(to top,#0069A6 10%,#0078C0 10%);
}

请帮我解决这个问题。

Answer 1

你可以尝试这个：

 background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);

＆＃13;

.button_color{
    height:40px;
    border-radius:10px;
    color:white;
    background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
}

＆＃13;

<button type="button" class="button_color">
Make Payment

＆＃13;

Answer 2

您可以使用css选择器：

<style>
.button_color:hover{
    background: linear-gradient(#01152D 10%,#0078C0 100%);
}
.button_color:active{
    background: linear-gradient(#0000ff 10%,#ffffff 100%);
}
.button_color{
    height:40px;
    border-radius:10px;
    color:white;
    background: linear-gradient(#ff002D 10%,#00eeC0 100%);
}
</style>

<button type="button" class="button_color">
Make Payment
</button>

用法很简单：http://www.w3schools.com/cssref/sel_active.asp，您可以通过Google搜索找到其他选择器。您还可以更改班级的颜色，边框和任何属性，它们都将自动完成。

添加您想要更改主类的所有更改，当选择器激活时，您的css将被替换。

请自行更改颜色，这只是一个如何完成工作的演示。您也不需要包括顶部等。您必须使用百分比。这意味着颜色的开始。

在您的代码中，您将开始和结束都设置为10％，这对于双色渐变是错误的。

例如，对于3色渐变，可以使用：（红色10％，绿色50％，蓝色100％）

Answer 3

查看CSS-gradient-generator。

我不知道你是怎么想象的，所以我为你创造了一个有着艰难休息的渐变：

.button_color{
height:40px;
border-radius:10px;
color:white;
background: #0069a6;
background: -moz-linear-gradient(top, #0069a6 0%, #1e5799 50%, #0078c0 50%, #0078c0 51%, #005f96 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0069a6), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(51%,#0078c0), color-stop(100%,#005f96));
background: -webkit-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -o-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -ms-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: linear-gradient(to bottom, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0069a6', endColorstr='#005f96',GradientType=0 );
}
.button_color:hover{
background: #02356a;
background: -moz-linear-gradient(top, #02356a 0%, #1e5799 50%, #0078c0 50%, #0078c0 50%, #01152d 51%, #002147 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02356a), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#01152d), color-stop(100%,#002147));
background: -webkit-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -o-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -ms-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: linear-gradient(to bottom, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02356a', endColorstr='#002147',GradientType=0 );
}
.button_color:active{
background: #004085;
background: -moz-linear-gradient(top, #004085 0%, #005f96 50%, #0078c0 50%, #0078c0 50%, #0069a6 51%, #0078c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004085), color-stop(50%,#005f96), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#0069a6), color-stop(100%,#0078c0));
background: -webkit-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -o-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -ms-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: linear-gradient(to bottom, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004085', endColorstr='#0078c0',GradientType=0 );
}

如果这不是您的预期，请使用渐变生成器自行尝试。

Answer 4

您必须使用伪类。悬停状态的CSS将被写入'button：hover {desierd css}'。

针对keydown状态的CSS将被写入'button：active {desierd css}'。

这是一个描述问题的链接

http://www.w3schools.com/css/css_pseudo_classes.asp

希望有所帮助

如何在单个按钮上使用2个渐变

4 个答案: