<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Supermercado+One" rel="stylesheet">
    <title>Social Icon Animations</title>
  </head>
  <body>
    <div class="container">
      <h1 class="main-heading">Social</h1>
      <div class="social-icons">
        <ul>
          <li><i class="fa fa-instagram" aria-hidden="true"></i></li>
          <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
          <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
          <li><i class="fa fa-codepen" aria-hidden="true"></i></li>
          <li><i class="fa fa-github-alt" aria-hidden="true"></i></li>
        </ul>
      </div>
    </div>
  </body>
</html>
body {
  font-family: 'Supermercado One', cursive;
  font-size:300%;
background: #11998e;  /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding:30px;

}

h1 {
  text-align:center;
  font-weight:lighter;
  padding-top:50px;
  margin-bottom:-30px;
  color:#fff;
}

li {
  list-style:none;
  display:inline-block;
  margin-left:35px;
  color:#fff;
  height:50px;
  width:50px;
  padding:7px;
  border: 2px solid #fff transparent;
  border-radius:50%;
  transition: 0.5s;
  
  
}

.social-icons {
  text-align:center;  
}

li:hover {
  color:#000;
  border: 2px solid #fff;
  border-radius:50%;
  transition:0.5s;
  box-shadow: 0 10px 5px rgba(0,0,0,.2);
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.