Flat Social Share Buttons In Pure CSS

Preview:

Description:

A lightweight CSS library used for creating flat style social share buttons without any images.

Social icons supported:

• VK (Vkontakte)
• Facebook
• Twitter
• LinkedIn
• Google Plus
• Yahoo!
• Pinterest
• Reddit
• Tumblr
• LiveJournal
• MySpace
• Mail.Ru
• OK.Ru (Odnoklassniki)
• RSS feed

How to use it:

Download and include the css-only-share-buttons.min.css in the html page as follow:

<link rel="stylesheet" href="css-only-share-buttons.min.css">

Add the following social share buttons to the webpage as per your need.

<a href="#" class="css-only-share vk" title="Share on VK"><span>B</span></a>
<a href="#" class="css-only-share facebook" title="Share on Facebook"><span>f</span></a>
<a href="#" class="css-only-share twitter" title="Share on Twitter"><span>t</span></a>
<a href="#" class="css-only-share linkedin" title="Share on LinkedIn"><span>in</span></a>
<a href="#" class="css-only-share gplus" title="Share on Google+"><span>g+</span></a>
<a href="#" class="css-only-share yahoo" title="Share on Yahoo!"><span>Y!</span></a>
<a href="#" class="css-only-share pinterest" title="Share on Pinterest"><span>p</span></a>
<a href="#" class="css-only-share reddit" title="Share on Reddit"><span>R</span></a>
<a href="#" class="css-only-share tumblr" title="Share on Tumblr"><span>t</span></a>
<a href="#" class="css-only-share livejournal" title="Share on LiveJournal"><span>L</span></a>
<a href="#" class="css-only-share myspace" title="Share on MySpace"><span>my</span></a>
<a href="#" class="css-only-share mailru" title="Share on Mail.Ru"><span>@</span></a>
<a href="#" class="css-only-share okru" title="Share on OK.Ru"><span>OK</span></a>
<a href="#" class="css-only-share rss" title="RSS feed"><span>RSS</span></a>