XF 1.4 Problem with colors with custom button

[Betclever]

Hello all,

I made buttons for my custom page but on Firefox, everything is ok like on this print screen:

And this is what I have on Chrome:

Please find the codes for both buttons:

.bloc-reviews a.reviewnow {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #c3c3c3 20%, #7d7d7d 100%) repeat scroll 0 0;
    border: 1px solid #949494;
    border-radius: 5px;
    box-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.3) inset, 0 0 2px hsla(0, 100%, 100%, 0.3) inset, 0 1px 2px hsla(0, 0%, 0%, 0.29);
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font: bold 15px/27px sans-serif;
    margin: 0;
    padding: 5px 15px 3px;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.3);
    text-transform: uppercase;
}

.bloc-reviews a.betnow {
    background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #9e0107 20%, #be0007 100%) repeat scroll 0 0;
    border: 1px solid #9e0107;
    border-radius: 5px;
    box-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.3) inset, 0 0 2px hsla(0, 100%, 100%, 0.3) inset, 0 1px 2px hsla(0, 0%, 0%, 0.29);
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font: bold 15px/27px sans-serif;
    margin: 0 0 0 15px;
    padding: 5px 15px 3px;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.3);
    text-transform: uppercase;
}

What's wrong please?
Thanks for your help.

 

[Dylan V]

Hi,

Replace your code with this one:

.bloc-reviews a.reviewnow
{
    background: #c3c3c3;
    background: -moz-linear-gradient(top,  #c3c3c3 20%, #7d7d7d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#c3c3c3), color-stop(100%,#7d7d7d));
    background: -webkit-linear-gradient(top,  #c3c3c3 20%,#7d7d7d 100%);
    background: -o-linear-gradient(top,  #c3c3c3 20%,#7d7d7d 100%);
    background: -ms-linear-gradient(top,  #c3c3c3 20%,#7d7d7d 100%);
    background: linear-gradient(to bottom,  #c3c3c3 20%,#7d7d7d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c3c3', endColorstr='#7d7d7d',GradientType=0 );
    border: 1px solid #949494;
    border-radius: 5px;
    box-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.3) inset, 0 0 2px hsla(0, 100%, 100%, 0.3) inset, 0 1px 2px hsla(0, 0%, 0%, 0.29);
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font: bold 15px/27px sans-serif;
    margin: 0;
    padding: 5px 15px 3px;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.3);
    text-transform: uppercase;
}

.bloc-reviews a.betnow
{
    background: #9e0107;
    background: -moz-linear-gradient(top,  #9e0107 20%, #be0007 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#9e0107), color-stop(100%,#be0007));
    background: -webkit-linear-gradient(top,  #9e0107 20%,#be0007 100%);
    background: -o-linear-gradient(top,  #9e0107 20%,#be0007 100%);
    background: -ms-linear-gradient(top,  #9e0107 20%,#be0007 100%);
    background: linear-gradient(to bottom,  #9e0107 20%,#be0007 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e0107', endColorstr='#be0007',GradientType=0 );
    border: 1px solid #9e0107;
    border-radius: 5px;
    box-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.3) inset, 0 0 2px hsla(0, 100%, 100%, 0.3) inset, 0 1px 2px hsla(0, 0%, 0%, 0.29);
    color: #fff !important;
    cursor: pointer;
    display: inline-block;
    font: bold 15px/27px sans-serif;
    margin: 0 0 0 15px;
    padding: 5px 15px 3px;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 hsla(0, 0%, 0%, 0.3);
    text-transform: uppercase;
}

By default, the gradients are not compatible with all browsers, so the prefixes are required.

 

[Betclever]

Thank you Dilan, it works perfectly.