• 0

Button colour in Chrome vs Firefox


Question

Posted · Report post

Hey, I've changed a colour of a button - the iCallout button, Join our mailing list, in the bottom right - from blue to grey in the CSS customisations. It shows up in grey in Chrome and Safari, but it's blue in Firefox. Any idea how to make sure it's always grey in any browser?

 

Site: http://nationalmallunderground.org

 

Code:

.icallout-action.btn.btn-primary.btn-large { 
  background-color: #7c7a7d;
  background-image: -webkit-linear-gradient(top,#7c7a7d,#7c7a7d); }

.section-icallout .format-inline .icallout-head { 
  background-color: #7c7a7d;
  background-image: -webkit-linear-gradient(top,#7c7a7d,#7c7a7d); }

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

So the Gradient in firefox is coming from the following 

 

.btn-primary {

    background-image: -moz-linear-gradient(center top , #1780FF, #006BED);}

 

-moz is the indicator that your css are telling firefox which style to use 

 

try adding the following 

 

   background-image-moz-linear-gradient(center top , #7c7a7d, #7c7a7d);

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great, thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No Problem - glad it helped. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Also please be aware that your code with the -moz added will then only work in FireFox and Webkit browsers i.e Chrome and Safari. If you want your gradient to be visible in all browsers you will need to generate the correct code, see here for assistance. http://www.colorzilla.com/gradient-editor/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now