Social Buttons Border

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

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>

⌃