Question

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

Was it helpful?

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
});

OTHER TIPS

You can't. The Send button is within an iFrame so you cannot change how it looks outside of the options provided here. I recommend using the Graph API send dialog and building your own button (you can even take the CSS/Styles from FB if you like):

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top