WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Blue button code not working (6 posts)

  1. Smita12481
    Member
    Posted 8 months ago #

    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

  2. Laura Hartwig
    Member
    Posted 8 months ago #

    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!

  3. Smita12481
    Member
    Posted 8 months ago #

    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!

  4. Laura Hartwig
    Member
    Posted 8 months ago #

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

  5. Jitendra Mishra
    Cyberchimps Support Rep
    Posted 6 months ago #

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

    http://cyberchimps.com/forum/

    Thanks

  6. David Burkhart
    Member
    Posted 5 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.