Button Generator

Compact Share Buttons

Social Media Buttons for Your Website

Advantages

  • Easy setup, easy to integrate in your website: Simply copy and paste the code to the relevant position in your HTML document.
  • No privacy concerns: The button code is completely embedded in your website. No external requests, no cookies, no tracking. As an alternative you have the option to host the code on your server or webspace.
  • Fast: No performance problems.
  • Responsive size: The size of the buttons depends on the CSS font-size of the parent element.
  • Scalable: The buttons look crisp on HiDPI (Retina) displays and at all zoom levels.
  • Customizable by your own CSS (for instance via child selectors, see the HOWTO section) or code modifications.
  • Free of charge. This website is funded by the advertisements on this website.

Generator

Preview

Settings

Services
Facebook
Twitter
Reddit
Digg
WhatsApp
Telegram
Mail
Delicious
LinkedIn
XING
Blogger
Tumblr
StumbleUpon
VK
Google+
More Services
Info Link

Borders 10%

Colors

Shadow

Optimizations (Code Size Reduction) fontawesome.com

Installation

The code is optimized for HTTP compression (enabled on most websites). Depending on your settings the maximum compressed size will be about 4.3kB. Embedded in your HTML code the compression ratio may even increase.

Approximate code size (uncompressed / gzip compressed):

Copy and paste the code into your site:* **





* Alternatively you can  download the code and install it as an external JavaScript file on your server or webspace.


** By installing the code you agree to the terms of service.














HOWTO...


...select the buttons in my style sheet?

Example: Put the button code inside of a DIV container, give the container a class name. Like this:



<div class="buttons-social">

	YOUR BUTTON CODE

</div>




Now you can use the following rule to apply CSS declarations to each button:



.buttons-social>a{

	YOUR CUSTOM CSS DECLARATIONS

}




Use the following rule to apply hover effects to each button:

.buttons-social>a:hover{

	YOUR CUSTOM CSS DECLARATIONS

}