Question

I am trying to make this button using CSS3:

But my button looks like this right now:

The CSS3 Gradient effect somehow removes the blue color, why does it do that and how can I fix it.

Here is a jsFiddle example: http://jsfiddle.net/fjYWZ/

HTML code:

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

CSS code:

        .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

Just add this property in your .button class

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

Try this updated fiddle

EDIT I have updated the code to support multiple colors here you can find two buttons with different colors. I have added two classes as .red & .blue. Please refer new 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;
}

Note: remove these properties from the body class. Also add as much color classes you want and add this class as second param in your style tag as

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

here class="button blue large facebook radius nice" use second class as new color class.