Create A Glossy Social Media Icons Using CSS & HTML #BKTutorial

Source Code:

1) Index.html

<link rel="stylesheet" href="style.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<ul>

<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-tumblr" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-flickr" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-quora" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-foursquare" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a></li><br>

<li><a href="#"><i class="fa fa-wordpress" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-stumbleupon" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-yahoo" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-soundcloud" aria-hidden="true"></i></a></li>

<li><a href="#"><i class="fa fa-rss" aria-hidden="true"></i></a></li>

</ul>

2) Style.css

@charset "utf-8";

/* CSS Document */

body

{

  margin:0;

  padding:0;

  background:#ededed;

}

ul

{

  position:absolute;

  top:10%;

  left:-30%;

  transform:translate(550px,-10px);

  margin:0px;

  padding:6px;

  display:flex;

}

ul li

{

  list-style:none;

}

ul li a

{

  position:relative;

  width:60px;

  height:60px;

  background:#F1F1F1;

  display:block;

  text-align:center;

  margin:0 0px;

  border-radius:50%;

  padding:0px;

  /*box-sizing:border-box;*/

  text-decoration:none;

  box-shadow:0.10px 0.20px rgba(0,0,0,0.2);

  transition:.5s;

}

ul li a:hover

{

  box-shadow:0.2px 8px rgba(0,0,0,0.3);

}

ul li a .fa

{

  width:100%;

  height:100%;

  display:block;

  background:linear-gradient(0deg,#FFF,#DDD);

  border-radius:50%;

  line-height:calc(60px /*-12px*/);

  font-size:24px;

  /*padding:5px;*/

  color:#262626;

  transition:.5s;

}

ul li:nth-child(1) a:hover .fa

{

  color:#3b5998;

}

ul li:nth-child(2) a:hover .fa

{

  color:#bb0000;

}

ul li:nth-child(3) a:hover .fa

{

  color:#00aced;

}

ul li:nth-child(4) a:hover .fa

{

  color:#dd4b39;

}

ul li:nth-child(5) a:hover .fa

{

  color:#cb2027;

}

ul li:nth-child(6) a:hover .fa

{

  color:#007bb6;

}

ul li:nth-child(7) a:hover .fa

{

  color:#32506d;

}

ul li:nth-child(8) a:hover .fa

{

  color:#bc2a8d;

}

ul li:nth-child(9) a:hover .fa

{

  color:#ff0084;

}

ul li:nth-child(10) a:hover .fa

{

  color:#ea4c89;

}

ul li:nth-child(11) a:hover .fa

{

  color:#a82400;

}

ul li:nth-child(12) a:hover .fa

{

  color:#0072b1;

}

ul li:nth-child(13) a:hover .fa

{

  color:#45668e;

}

ul li:nth-child(14) a:hover .fa

{

  color:#21759b; 

}

ul li:nth-child(15) a:hover .fa

{

  color:#EB4823;

}

ul li:nth-child(16) a:hover .fa

{

  color:#7B0099;

}

ul li:nth-child(17) a:hover .fa

{

  color:#ff3a00;

}

ul li:nth-child(18) a:hover .fa

{

  color:#3b5998;

}

Output: