2

我正在尝试使用 CSS3 制作此按钮： 在此处输入图像描述

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

在此处输入图像描述

CSS3 渐变效果以某种方式去除了蓝色，为什么会这样做以及如何修复它。

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

HTML 代码：

<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);
        }
4

2 回答 2

2

只需在您的.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)));
}

试试这个更新的小提琴

编辑我已经更新了代码以支持多种颜色在这里你可以找到两个不同颜色的按钮。我添加了两个类作为.red& .blue。请参考新小提琴

.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"使用第二类作为新的颜色类。

于 2012-06-23T15:01:38.747 回答
1

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

请记住 -moz 前缀意味着这仅适用于 Firefox。

于 2012-06-23T15:03:05.730 回答