Social Buttons Animation Moving 1

Huge box of buttons of any size, any animation and any color

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>