Support » Theme: Responsive » Blue button code not working

  • I am using the responsive theme and initially successfully changed the color of the blue button on the home page by using the following code in the CSS style under theme options.

    a.blue {
    background-color: #606788;
    background-image: -moz-linear-gradient(center top , #6B7398, #606788);
    border: 1px solid #555C79;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 #555C79;
    }

    a.blue:hover {
    background-color: #888fac;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#888fac), to(#606788));
    background-image: -webkit-linear-gradient(top, #888fac, #606788);
    background-image: -moz-linear-gradient(top, #888fac, #606788);
    background-image: -ms-linear-gradient(top, #888fac, #606788);
    background-image: -o-linear-gradient(top, #888fac, #606788);
    background-image: linear-gradient(top, #888fac, #606788);
    border: 1px solid #115290;
    color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#888fac, endColorstr=#606788);
    text-shadow: 0 -1px 0 #555C79;
    }

    For some reason, after returning to the site, the button is blue, but the hover colors are correct. Please help! http://www.thefertilityadvisor.com

Viewing 5 replies - 1 through 5 (of 5 total)
  • Did you mean the hover colors are incorrect? They look good to me. Did you figure this out? If not, let me know what you were looking for so I can help you. If all is good, please mark as resolved. Thanks!

    Thanks for your response. What I realized is that the button color looks correct in Mozilla but not in google chrome or safari. Do you know how I can fix this so it looks the same across platforms?

    I would like the button color to be a shade of purple to match my site (not the standard blue). On all platforms, the hover color is the correct purple color. Thank you!

    Have you tried this site: http://www.cssbuttongenerator.com/ ? It will generate all the code for you and it will work cross browser.

    Jitendra Mishra

    (@jitendra-mishra)

    Cyberchimps Support Rep

    Sorry, we do not monitor these forums, please use the official forum:

    Forum

    Thanks

    I don’t know anything about the particulars of cross-browser hacks for background-image, but it seems to me by looking at your code that this should do the trick:

    a.blue {
    background-color: #606788;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6B7398), to(#606788));
    background-image: -webkit-linear-gradient(top, #6B7398, #606788);
    background-image: -moz-linear-gradient(top, #6B7398, #606788);
    background-image: -ms-linear-gradient(top, #6B7398, #606788);
    background-image: -o-linear-gradient(top, #6B7398, #606788);
    background-image: linear-gradient(top, #6B7398, #606788);
    border: 1px solid #555C79;
    color: #FFFFFF;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6B7398, endColorstr=#606788);
    text-shadow: 0 -1px 0 #555C79;
    }
    
    a.blue:hover {
    background-color: #888fac;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#888fac), to(#606788));
    background-image: -webkit-linear-gradient(top, #888fac, #606788);
    background-image: -moz-linear-gradient(top, #888fac, #606788);
    background-image: -ms-linear-gradient(top, #888fac, #606788);
    background-image: -o-linear-gradient(top, #888fac, #606788);
    background-image: linear-gradient(top, #888fac, #606788);
    border: 1px solid #115290;
    color: #ffffff;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#888fac, endColorstr=#606788);
    text-shadow: 0 -1px 0 #555C79;
    }
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Blue button code not working’ is closed to new replies.