Question

我正在尝试使用CSS3创建此按钮： enter image description here

但我的按钮现在看起来像这样：

enter image description here

CSS3 Gradient效果以某种方式消除了蓝色，为什么会这样做以及如何解决它。

这是一个jsFiddle示例：http://jsfiddle.net/fjYWZ/

HTML code：

<a class="button large facebook radius nice" href="#">Logga in med facebook</a>

CSS代码：

        .button{

                -moz-transition-duration: 0.1s;
                -moz-transition-property: opacity;
                -moz-transition-timing-function: ease-in;

                background-color: #999999;
                border: 1px solid #999999;
                color: #FFFFFF;
                cursor: pointer;
                display: inline-block;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                font-size: 1.3rem;
                font-weight: bold;
                line-height: 34px;
                margin: 0;
                outline: medium none;
                padding: 0 34px;
                position: relative;
                text-align: center;
                text-decoration: none;
        }
        .large {
            font-size: 18px;
            line-height: 48px;
            padding: 0 40px;
            width: auto;
        }

        .facebook {
            background-color: #3B5998;
            border-color: #3B5998;
            color: #FFFFFF;
        }
        .button.radius {
            border-radius: 7px 7px 7px 7px;
        }
        .full-width {
            padding-left: 0 !important;
            padding-right: 0 !important;
            text-align: center;
            width: 100%;
        }
        .nice {
            background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
            text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
        }

Answer 1

只需在.button类

中添加此属性即可

.button{
   /*Your existing styling*/
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
}

尝试更新fiddle

编辑我更新了代码以支持多种颜色，您可以找到两个不同颜色的按钮。我添加了两个类.red＆amp; .blue。请参阅新的fiddle

.blue{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}

.red{
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 0.4)), to(rgba(255, 0, 0, 0)));
        background: -moz-linear-gradient(center top , rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}

注意：从body课程中删除这些属性。还要添加所需的颜色类，并将此类添加为样式标记中的第二个参数

<a class="button blue large facebook radius nice" href="#">Logga in med facebook</a>

此处class="button blue large facebook radius nice"使用第二个类作为新颜色类。

Answer 2

您的-moz-linear-gradient会将背景重置为#999999 ...将其更改为#3B5998并且效果非常好。

请记住，-moz前缀表示这只适用于Firefox。

CSS3 Gradient错误，替换背景颜色

2 个答案: