<body>
  <div class="buttons">
    <a class="twitter" href=""><i class="fa fa-twitter"></i></a>
    <a class="facebook" href=""><i class="fa fa-facebook"></i></a>
    <a class="youtube" href=""><i class="fa fa-youtube-play"></i></a>
    <a class="twitch" href=""><i class="fa fa-twitch"></i></a>
  </div>
  <div class="footer">
    CSS3 Circle Social Buttons by <a href="http://azmind.com">Azmind.com</a> - Follow me on <a href="https://www.facebook.com/pages/Azmindcom/196582707093191">Facebook</a> and <a href="https://twitter.com/anli_zaimi">Twitter</a>!
  </div>
</body>

body {
  text-align: center;
  font-family: Arial;
  background: #f8f8f8;
}

.buttons {
  margin-top: 160px;
  
  a {
    margin-right: 30px;
    width: 64px;
    height: 64px;
    font-size: 24px;
    display: inline-block;
    position: relative;
    line-height: 64px;
    background-color: #eaeaea;
    background-image: linear-gradient(to bottom, #f6f6f6, #eaeaea);
    border-radius: 32px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
    
    &:active {
      top: 1px;
      background-image: linear-gradient(to bottom, #eaeaea, #f6f6f6);
      
      &::before {
        top: -9px;
      }
    }
    
    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: -8px; right: -8px; bottom: -8px; left: -8px;
      background-color: #eaeaea;
      border-radius: 140px;
      opacity: 0.5;
      
      :hover & {
        opacity: 1;
      }
    }
  }
  
  
}

.twitter:hover::before {
  background-color: #c6f0f8;
}

.facebook:hover::before {
  background-color: #dae1f0;
}

.youtube:hover::before {
  background-color: #fadae6;
}

.twitch:hover::before {
  background-color: #f8ebb6;
}

.footer {
  width: 600px;
  margin: auto;
  margin-top: 100px;
  font-size: 15px;
  font-weight: bold;
  color: #cdcdcd;
  text-shadow: 1px 2px 0 #fff;
}

.footer a {
    color: #bebebe;
    text-decoration: none;
}

.footer a:hover {
  color: #bebebe;
  text-decoration: none;
  border-bottom:1px dashed #cdcdcd;
}
View Compiled 
/* -------------------------------------------------------

  Description: CSS3 Circle Social Buttons
  Version: 1.0
  Author: Anli Zaimi
  Author URI: http://azmind.com

------------------------------------------------------- */

/*

  This code is directly copied from:
  http://azmind.com/demo/css3-circle-social-buttons/
  (Anli's final product looks much better; check it out!)

  Changes:
  I removed images to make it work in codepen,
  added SCSS, removed browser prefixes,
  and added Font Awesome.
  
*/

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.