Flat Social Share Buttons In Pure CSS


Author: khasky
Views Total: 1,544 views
Official Page: Go to website
Last Update: July 30, 2016
License: MIT

Preview:

Flat Social Share Buttons In Pure CSS

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>
See also  0.5kb Responsive CSS Grid Framework - SMART CSS GRID

Leave a Reply

Your email address will not be published. Required fields are marked *