Resize/scale facebook like button (height and width)

Alexandru C picture Alexandru C · Dec 30, 2011 · Viewed 15.5k times · Source

I couldn't find anywhere (if it's possible) how to resize the whole like button (not it's iframe or the container, but the button itself with the writing and everything).

Google+ offers several versions of it's +1 button, the smallest being 15px.

For design purposes I need to change (scale) the size of the FB like button to match the layout of the site (in this particular case... scale down to 15px).

(according to FB terms and conditions scaling is permitted.)

Answer

Ben picture Ben · Oct 28, 2012

Although you say not the iframe, if you do scale the iframe with CSS3 it will increase the size of the button. It would probably be best to give the iframe a ID or class but something like this would work if it was the only iframe on the page:

iframe
{
transform: scale(1.5);
-ms-transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-o-transform: scale(1.5); 
-moz-transform: scale(1.5); 
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}

Here is an example http://www.tinydesign.co.uk/like/