WordPress.org

Support

Support » Themes and Templates » Blue button code not working

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)
  • LauraHartwigDesign
    Participant

    @laurahartwigdesign

    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!

    LauraHartwigDesign
    Participant

    @laurahartwigdesign

    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
    Cyberchimps Support Rep

    @jitendra-mishra

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

    Forum

    Thanks

    David Burkhart
    Participant

    @dlburkhart

    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.