Blue button code not working

Smita12481
(@smita12481)

10 years, 5 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

Viewing 5 replies - 1 through 5 (of 5 total)

LauraHartwigDesign
(@laurahartwigdesign)

10 years, 5 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!

Thread Starter Smita12481
(@smita12481)

10 years, 5 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!

LauraHartwigDesign
(@laurahartwigdesign)

10 years, 5 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.

Jitendra Mishra
(@jitendra-mishra)

10 years, 4 months ago

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

http://cyberchimps.com/forum/

Thanks
David Burkhart
(@dlburkhart)

10 years, 3 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;
}
```

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Blue button code not working’ is closed to new replies.