<div class="container">
<div class="headline">
  <h1>Animated Social Media Icons</h1>
</div>
<div class="social-buttons">        
<!-- facebook  Button -->
        <a href="http://www.facebook.com" target="blank" class="social-margin"> 
          <div class="social-icon facebook">
            <i class="fa fa-facebook" aria-hidden="true"></i> 
          </div>
        </a>
        <!-- pinterest Button -->
        <a href="https://pinterest.com/" target="blank"  class="social-margin">
          <div class="social-icon pinterest">
            <i class="fa fa-pinterest-p" aria-hidden="true"></i>
          </div>
        </a>
        <!-- LinkedIn Button -->
        <a href="http://linkedin.com/" class="social-margin" target="blank">
          <div class="social-icon linkedin">
            <i class="fa fa-linkedin" aria-hidden="true"></i>
          </div> 
        </a>
      <!-- Github Button -->
        <a href="https://github.com/"  target="blank"  class="social-margin">
          <div class="social-icon github">
            <i class="fa fa-github-alt" aria-hidden="true"></i>
          </div>
        </a>
        <!-- Youtube Button -->
        <a href="http://youtube.com/" target="blank"  class="social-margin">
          <div class="social-icon youtube">
            <i class="fa fa-youtube" aria-hidden="true"></i>
          </div> 
        </a>
        <!-- Behance Button -->
        <a href="https://behance.com/"  target="blank" class="social-margin">
          <div class="social-icon behance">
            <i class="fa fa-behance" aria-hidden="true"></i>
          </div>
        </a>
        <!-- Soundcloud Button -->
        <a href="http://soundcloud.com/" target="blank" class="social-margin">
          <div class="social-icon soundcloud">
            <i class="fa fa-soundcloud" aria-hidden="true"></i>
          </div> 
        </a>
  <!-- TwitterButton -->
        <a href="http://twitter.com/" target="blank" class="social-margin">
          <div class="social-icon twitter">
            <i class="fa fa-twitter" aria-hidden="true"></i>
          </div> 
        </a>
</div>
</div>

/* Social Button Icon Styling */
/* Colors */
$facebook-color: #3b5998;
$twitter-color: #55acee;
$google-color: #dd4b39;
$linkedin-color: #0976b4;
$pinterest-color: #cb2027;
$behance-color: #1769ff;
$github-color: #4183c4;
$youtube-color:#bb0000;
$soundcloud-color:#ff3a00;

html,body{
  margin:0;
  height:100%;
}
.container{
  padding-top:30px;
  min-height:100%;
  text-align:center;
background: #fffbd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #fffbd5, #b20a2c); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #fffbd5, #b20a2c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.headline{
  text-align:center;
  h1{
    font-size:35px;
     font-family: Arial, Helvetica, sans-serif;
  }
}

.social-buttons{
  display:inline-block;
  background: rgba(256,256,256,0.5);
  padding:20px;
  padding-bottom: 5px;
  border-radius:10px;
  text-align:center;
  margin:20px 10px;
  
/* Helper class to divide the icons */
.social-margin {
  margin-right: 15px;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

.social-icon {
  margin-bottom: 15px;
   box-sizing: border-box;
  -moz-border-radius: 138px;
  -webkit-border-radius: 138px;
  border-radius: 138px;
  border: 5px solid;
  text-align: center;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 1px;
  padding-top: 11px;
  transition: all 0.5s;
  &:hover {
    transform: rotate(360deg)scale(1.3);
  }
  /* Facebook Button Styling */
  &.facebook {
    font-size: 22px;
    padding-top: 9px;
    border-color: $facebook-color;
    background-color: $facebook-color;
    color: #ffffff;
    &:hover {
      background-color: #ffffff;
      color: $facebook-color;
    }
  }
  /* Twitter Button Styling */
  &.twitter {
    font-size: 22px;
    padding-top: 10px;
    padding-left: 2px;
    border-color: $twitter-color;
    background-color: $twitter-color;
    color: #ffffff;
    &:hover {
      background-color: #ffffff;
      color: $twitter-color;
    }
  }
  /* Google+ Button Styling */
  &.google-plus {
    font-size: 22px;
    padding-top: 9px;
    padding-left: 2px;
    background-color: $google-color;
    color: #ffffff;
    border-color: $google-color;
    &:hover {
      background-color: #ffffff;
      color: $google-color;
    }
  }
  /* Linkedin Button Styling */
  &.linkedin {
    font-size: 24px;
    padding-top: 8px;
    padding-left: 1px;
    background-color: $linkedin-color;
    color: #ffffff;
    border-color: $linkedin-color;
    &:hover {
      background-color: #ffffff;
      color: $linkedin-color;
    }
  }
  /* Pinterest Button Styling */
  &.pinterest {
    font-size: 22px;
    padding-top: 9px;
    background-color: $pinterest-color;
    color: #ffffff;
    border-color: $pinterest-color;
    &:hover {
      background-color: #ffffff;
      color: $pinterest-color;
    }
  }
  /* Behance Button Styling */
  &.behance {
    font-size: 22px;
    padding-top: 9px;
    background-color: $behance-color;
    color: #ffffff;
    border-color: $behance-color;
    &:hover {
      background-color: #ffffff;
      color: $behance-color;
    }
  }
  /* Github Button Styling */
  &.github {
    font-size: 22px;
    padding-top: 9px;
    background-color: $github-color;
    color: #ffffff;
    border-color: $github-color;
    &:hover {
      background-color: #ffffff;
      color: $github-color;
    }
  }
  /* Youtube Button Styling */
  &.youtube {
    font-size: 22px;
    padding-top: 9px;
    padding-left: 0px;
    background-color: $youtube-color;
    color: #ffffff;
    border-color: $youtube-color;
    &:hover {
      background-color: #ffffff;
      color: $youtube-color;
    }
  }
  /* Soundcloud Button Styling */
  &.soundcloud {
    font-size: 22px;
    padding-top: 9px;
    padding-left: 0px;
    background-color: $soundcloud-color;
    color: #ffffff;
    border-color: $soundcloud-color;
    &:hover {
      background-color: #ffffff;
      color: $soundcloud-color;
    }
  }
}
}