How to Color Like Buttons of Facebook

Everybody knows that it is impossible to change style inside Iframes.

But there is a small trick that can make a change to the look of the iframe from outside.

Live Example

CSS Filters, exist quite a long time in css, they can make manipulation to colors.

One of the filters is hue. The hue as 360deg in the plate of colors, and we can manipulate the color by changing the hue hue degrees.

The trick: filters work on any element that we want, including Iframes!

How it Works?

HTML

<div class="like-button">
    <iframe src="//www.facebook.com/plugins/like.php"></iframe>
</div>

The default color of the facebook like button is blue, and in order to change the color, we will change the hue color degree.

For Example

CSS

.like-button{filter:hue-rotate(60deg);} /*will make it purple*/

Notice: that the color you get is dependent on the real color you have.

Live Example

Support:

Chrome, Safari, Android (from 4.4).
Firefox support only SVG Filter.
IE - doesn't support it at all.

If you like this post, I will be happy to get your UPVOTE. You are welcome to follow me or my team @Walla! R&D and endorse my skills.

Elad Shechter.