1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 Problem with colors with custom button

Discussion in 'Styling and Customization Questions' started by Betclever, May 26, 2015.

  1. Betclever

    Betclever Active Member

    Hello all,

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

    [​IMG]

    And this is what I have on Chrome:

    [​IMG]

    Please find the codes for both buttons:

    Code:
    .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.
     
  2. Dylan V

    Dylan V Well-Known Member

    Hi,

    Replace your code with this one:
    Code:
    .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.
     
  3. Betclever

    Betclever Active Member

    Thank you Dilan, it works perfectly. :)
     

Share This Page