how to change color of facebook like button

Question

using the guide at http://developers.facebook.com/docs/reference/plugins/like

I am trying to put a like button on my web page. How can i change the color of text [Be

Answer 1

@Mohammad Samim Samir inspired this alternate solution... he stated .fb-like-box, it didn't work for @isherwood only because of the appended "-box", ".fb-like" on it's own with followed by "{background:#f5f5f5;}", it would have worked.

".fb-like {
    position: relative;
    top: 3px;
    left: -10px;
    background-color: white;
    width: 220px;
    height: 20px;
    color: white;
}"

What it looks like after applying the above style to stylesheet.css

Answer 2

It is possible, just create a css class by the name of .fb-like-box { background:#f5f5f5; }

Answer 3

Yes, it can be done. I will give you the first steps (just to REMOVE COLOR), then you can do a further research on -webkit-filter: hue-rotate to change the color, if you don't want just to remove it.

First, add an #id to your FB code:

<div id="fboverlay" class="fb-like" data-href="YOURFACEBOOKADDRESS" data-width="300" data-layout="button_count" data-show-faces="false" data-send="false"></div>

You can leave your code as it is right now, just add that id="fboverlay" over there.

Then edit your css and add:

#fboverlay {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

Or whatever else you'd like. And that's it.

Surely it's using CSS3, therefore it's not 100% compatible (specially with old browsers), but you know how it is...