Search code examples
cssfacebookuser-interfacefacebook-social-plugins

Enlarging the size of Facebook send button?


Is there a way of enlarging the Facebook send button by using css on it ?

The small send button seems very miniature for the site am trying to build with its bigger font size

Please help


Solution

  • You can use CSS transforms like scale, scaleX or scaleY to change size of elements.

    To get Send Button with size of 150% you may use something like:

    .fb-send, fb\:send {
      transform: scale(1.5);
    }
    

    You may see this in action (without polyfill)

    Notes:

    • Remember about browser specific prefixes: -webkit, -moz, -o and -ms.
    • Internet Explorer supports CSS transforms only from version 9, so you'll need to use polyfill to support older versions.

    Update:
    Aside of using CSS for scaling the original button you may use Send Dialog as suggested in other answer. Use JavaScript SDK (using method send of FB.ui) and your custom button that may look as you wish, just fire next code once clicking on custom button:

    FB.ui({
      method: 'send',
      name: document.title,
      link: document.location.href
    });