Social Buttons

All Social Buttons on one page

Due to large amount of icons, hover animation probably will not be smooth as should.
It's highly recommended to check separate page with each animation.

Size

Tiny

<div class="social-icons social-tiny">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Small

<div class="social-icons social-small">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Small-Medium

<div class="social-icons social-smedium">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Medium

<div class="social-icons">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Large-Medium

<div class="social-icons social-lmedium">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Large

<div class="social-icons social-large">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Huge

<div class="social-icons social-huge">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Moving 1

Bottom to top

<div class="social-icons social-anim-1a">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Top to bottom

<div class="social-icons social-anim-1b">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Left to right

<div class="social-icons social-anim-1c">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Right to left

<div class="social-icons social-anim-1d">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Moving 2

Bottom to top

<div class="social-icons social-anim-2a">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Top to bottom

<div class="social-icons social-anim-2b">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Left to right

<div class="social-icons social-anim-2c">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Right to left

<div class="social-icons social-anim-2d">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Shrink

Outside

<div class="social-icons social-anim-3a">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Inside

<div class="social-icons social-anim-3b">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Border

Border bottom

<div class="social-icons social-anim-4a">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Border top

<div class="social-icons social-anim-4b">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Rotating

Show bottom

<div class="social-icons social-anim-5a">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Show top

<div class="social-icons social-anim-5b">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Color

Coloured

<div class="social-icons social-coloured social-color-native">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Inverse 1

<div class="social-icons social-inverse-1">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Inverse 2

<div class="social-icons social-inverse-2">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Black 1

<div class="social-icons social-black-1">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Black 2

<div class="social-icons social-black-2">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Border

Bordered

<div class="social-icons social-border">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Round

<div class="social-icons social-round">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Rounded

<div class="social-icons social-rounded">
  <a href="#" class="btn btn-social-icon btn-adn">
    <i class="fa fa-adn"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-bitbucket">
    <i class="fa fa-bitbucket"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-dropbox">
    <i class="fa fa-dropbox"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-flickr">
    <i class="fa fa-flickr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-foursquare">
    <i class="fa fa-foursquare"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-microsoft">
    <i class="fa fa-windows"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-openid">
    <i class="fa fa-openid"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-pinterest">
    <i class="fa fa-pinterest"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-reddit">
    <i class="fa fa-reddit"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-soundcloud">
    <i class="fa fa-soundcloud"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-tumblr">
    <i class="fa fa-tumblr"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vimeo">
    <i class="fa fa-vimeo"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-vk">
    <i class="fa fa-vk"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-yahoo">
    <i class="fa fa-yahoo"></i>
  </a>
</div>

Fullwidth

Theme Color Background

<div class="social-icons social-lmedium social-icons-fw-theme">
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a></div>

Transparent Background

<div class="social-icons social-coloured social-color-native social-lmedium social-icons-fw">
  <a href="#" class="btn btn-social-icon btn-facebook">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-twitter">
    <i class="fa fa-twitter"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-google">
    <i class="fa fa-google"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-instagram">
    <i class="fa fa-instagram"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-github">
    <i class="fa fa-github"></i>
  </a>
  
  <a href="#" class="btn btn-social-icon btn-linkedin">
    <i class="fa fa-linkedin"></i>
  </a></div>

Image Background

<div class="social-icons social-lmedium social-icons-fw-image">
  <div class="social-fw-inner">
    <a href="#" class="btn btn-social-icon btn-facebook">
      <i class="fa fa-facebook"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-twitter">
      <i class="fa fa-twitter"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-google">
      <i class="fa fa-google"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-instagram">
      <i class="fa fa-instagram"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-github">
      <i class="fa fa-github"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-linkedin">
      <i class="fa fa-linkedin"></i>
    </a>  </div>
</div>

With text

<div class="social-icons social-lmedium social-icons-fw-image">
  <h3>learn more about our life in social networks</h3>
  <div class="social-fw-inner">
    <a href="#" class="btn btn-social-icon btn-facebook">
      <i class="fa fa-facebook"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-twitter">
      <i class="fa fa-twitter"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-google">
      <i class="fa fa-google"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-instagram">
      <i class="fa fa-instagram"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-github">
      <i class="fa fa-github"></i>
    </a>
    
    <a href="#" class="btn btn-social-icon btn-linkedin">
      <i class="fa fa-linkedin"></i>
    </a>  </div>
  <h3>awesome</h3>
</div>

Fixed

Fixed to left side

Fixed to right side

Fixed to bottom