Question

我一直在绞尽脑汁寻找CSS渐变的解决方案。我打算用橙色的“添加到购物车”按钮;它显示黑色的一个被设置为所有按钮的“默认”。

注意：

它在Chrome中显示橙色的“添加到购物车”。它的Firefox工作方式不同。

-

代码：

.button,
#button,
#submit,
.edit{
    margin: 1em 0 1.5em 0;
    display: inline-block;
    cursor: pointer;        
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    color: #fff;
    padding: 8px 25px;
    background: -moz-linear-gradient(
        top,
        #212121 0%,
        #0a0a0a);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#212121),
        to(#050505));
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #000;
    -moz-box-shadow:
        0px 1px 2px rgba(000,000,000,0.3),
        inset 0px 1px 1px rgba(255,255,255,0.2);
    -webkit-box-shadow:
        0px 1px 2px rgba(000,000,000,0.3),
        inset 0px 1px 1px rgba(255,255,255,0.2);
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -ms-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;  
}
    .button:hover,
    #button:hover,
    #submit:hover,
    .edit:hover{
        background: -moz-linear-gradient(
            top,
            #151515 0%,
            #151515);
        background: -webkit-gradient(
            linear, left top, left bottom, 
            from(#151515),
            to(#151515));       
        -webkit-box-shadow: 0px 0px 8px 5px rgba(222, 222, 222, .95);
        -moz-box-shadow: 0px 0px 8px 5px rgba(222, 222, 222, .95);
        box-shadow: 0px 0px 8px 5px rgba(222, 222, 222, .95);
    }

    .add_to_cart_button, .single_add_to_cart_button,
    .add_to_cart_button.button, .single_add_to_cart_button.button  {
        background: -moz-linear-gradient (
            top,
            #FAB31F 0%,
            #F49100) !important;
        background: -webkit-gradient(
            linear, left top, left bottom, 
            from(#FAB31F),
            to(#F49100)) !important;
        border: 1px solid #CE7B00 !important;
    }
    .add_to_cart_button:hover, .single_add_to_cart_button:hover {
        background: -moz-linear-gradient (
            top, #F49100 0%,
            #F49100);
        background: -webkit-gradient(
            linear, left top, left bottom, 
            from(#F49100),
            to(#F49100));
        border: 1px solid #CE7B00;      
        -webkit-box-shadow: 0px 0px 8px 5px rgba(253, 213, 128, .75);
        -moz-box-shadow: 0px 0px 8px 5px rgba(253, 213, 128, .75);
        box-shadow: 0px 0px 8px 5px rgba(253, 213, 128, .75);
    }

希望这可以解决！：）

PSS：

我测试过类：

a.add_to_cart_button
a.add_to_cart_button.button
.add_to_cart_button.button

除了.add_to_cart_button类背景的“！important”规则无效。

Answer 1

background-image:-moz-linear-gradient(top, #b53b36, #9d2224);/* Firefox 3.6 */
         background-image: -webkit-gradient(linear, left top, left bottom, from( #b53b36 /*{global-active-background-start}*/), to( #9d2224 /*{global-active-background-end}*/)); /* Saf4+, Chrome */
         background-image: -webkit-linear-gradient( #b53b36 /*{global-active-background-start}*/, #9d2224 /*{global-active-background-end}*/); /* Chrome 10+, Saf5.1+ */
         background-image:     -ms-linear-gradient( #b53b36 /*{global-active-background-start}*/, #9d2224 /*{global-active-background-end}*/); /* IE10 */
         background-image:      -o-linear-gradient( #b53b36 /*{global-active-background-start}*/, #9d2224 /*{global-active-background-end}*/); /* Opera 11.10+ */
         background-image:         linear-gradient( #b53b36 /*{global-active-background-start}*/, #9d2224 /*{global-active-background-end}*/);
         filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b53b36', endColorstr='#9d2224');/* IE6 & IE7 */
         -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b53b36', endColorstr='#9d2224')";/* IE8 */

你可以尝试上面的渐变代码。

CSS Gradient Buttons在Chrome和Firefox之间显示不同

1 个答案: