<h1>Hover to see the shadows</h1>

<a href="https://www.facebook.com/designcouch?ref=br_tf" class="logo facebook" target="_blank">
  <i class="fa fa-facebook"></i>
</a>

<a href="https://twitter.com/designcouch" class="logo twitter" target="_blank">
  <i class="fa fa-twitter"></i>
</a>

<a href="https://www.linkedin.com/pub/jesse-couch/14/261/831" class="logo linkedin" target="_blank">
  <i class="fa fa-linkedin"></i>
</a>

<a href="https://dribbble.com/designcouch" class="logo dribbble" target="_blank">
  <i class="fa fa-dribbble"></i>
</a>

body {
  background:#f8f8f8;
}

* {
  box-sizing:border-box;
  transition:.15s ease-in-out;
}

h1 {
  font-family:helvetica neue,helvetica,arial,sans-serif;
  font-size:35px;
  font-weight:200;
  color:#a9a9a9;
  margin:94px auto 20px auto;
}

$facebook-color:#173062;
$twitter-color:#2274b2;
$linkedin-color:#075e86;
$dribbble-color:#ae2258;

body {
  text-align:center;
}
.logo {
  display:inline-block;
  position:relative;
  left:0;
  top:0;
  padding:30px;
  font-size:45px;
  line-height:45px;
  height:105px;
  width:105px;
  text-align:center;
  overflow:hidden;
  border-radius:10px;
  margin:20px 20px 20px 0;
  color:white;
  box-shadow:2px 2px 2px rgba(0,0,0,.25);
}

.logo:active {
  box-shadow:2px 2px 2px rgba(0,0,0,.25);
  left:0px;
  top:0px;
}

.facebook {
  background: #3b5998; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #3b5998 0%, #3b5998 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b5998), color-stop(100%,#3b5998)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #3b5998 0%,#3b5998 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #3b5998 0%,#3b5998 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #3b5998 0%,#3b5998 100%); /* IE10+ */
background: linear-gradient(135deg,  #3b5998 0%,#3b5998 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#3b5998',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.facebook:hover {
  background: #3b5998; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #3b5998 0%, #173062 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#3b5998), color-stop(100%,#173062)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #3b5998 0%,#173062 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #3b5998 0%,#173062 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #3b5998 0%,#173062 100%); /* IE10+ */
background: linear-gradient(135deg,  #3b5998 0%,#173062 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#173062',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.logo:hover .fa-facebook {
   text-shadow: 
    1px 1px 0px $facebook-color,
    2px 2px 0px $facebook-color,
    3px 3px 0px $facebook-color,
    4px 4px 0px $facebook-color,
    5px 5px 0px $facebook-color,
    6px 6px 0px $facebook-color,
    7px 7px 0px $facebook-color,
    8px 8px 0px $facebook-color,
    9px 9px 0px $facebook-color,
    10px 10px 0px $facebook-color,
    11px 11px 0px $facebook-color,
    12px 12px 0px $facebook-color,
    13px 13px 0px $facebook-color,
    14px 14px 0px $facebook-color,
    15px 15px 0px $facebook-color,
    16px 16px 0px $facebook-color,
    17px 17px 0px $facebook-color,
    18px 18px 0px $facebook-color,
    19px 19px 0px $facebook-color,
    20px 20px 0px $facebook-color,
    21px 21px 0px $facebook-color,
    22px 22px 0px $facebook-color,
    23px 23px 0px $facebook-color,
    24px 24px 0px $facebook-color,
    25px 25px 0px $facebook-color,
    26px 26px 0px $facebook-color,
    27px 27px 0px $facebook-color,
    28px 28px 0px $facebook-color,
    29px 29px 0px $facebook-color,
    30px 30px 0px $facebook-color,
    31px 31px 0px $facebook-color,
    32px 32px 0px $facebook-color,
    33px 33px 0px $facebook-color,
    34px 34px 0px $facebook-color,
    35px 35px 0px $facebook-color,
    36px 36px 0px $facebook-color,
    37px 37px 0px $facebook-color,
    38px 38px 0px $facebook-color,
    39px 39px 0px $facebook-color,
    40px 40px 0px $facebook-color,
    41px 41px 0px $facebook-color,
    42px 42px 0px $facebook-color,
    43px 43px 0px $facebook-color,
    44px 44px 0px $facebook-color,
    45px 45px 0px $facebook-color,
    46px 46px 0px $facebook-color,
    47px 47px 0px $facebook-color,
    48px 48px 0px $facebook-color,
    49px 49px 0px $facebook-color,
    50px 50px 0px $facebook-color,
    51px 51px 0px $facebook-color,
  ;
}

.twitter {
  background: #55acee; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #55acee 0%, #55acee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#55acee), color-stop(100%,#55acee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #55acee 0%,#55acee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #55acee 0%,#55acee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #55acee 0%,#55acee 100%); /* IE10+ */
background: linear-gradient(135deg,  #55acee 0%,#55acee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#55acee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.twitter:hover {
  background: #55acee; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #55acee 0%, #2274b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#55acee), color-stop(100%,#2274b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #55acee 0%,#2274b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #55acee 0%,#2274b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #55acee 0%,#2274b2 100%); /* IE10+ */
background: linear-gradient(135deg,  #55acee 0%,#2274b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#2274b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.logo:hover .fa-twitter {
   text-shadow: 
    1px 1px 0px $twitter-color,
    2px 2px 0px $twitter-color,
    3px 3px 0px $twitter-color,
    4px 4px 0px $twitter-color,
    5px 5px 0px $twitter-color,
    6px 6px 0px $twitter-color,
    7px 7px 0px $twitter-color,
    8px 8px 0px $twitter-color,
    9px 9px 0px $twitter-color,
    10px 10px 0px $twitter-color,
    11px 11px 0px $twitter-color,
    12px 12px 0px $twitter-color,
    13px 13px 0px $twitter-color,
    14px 14px 0px $twitter-color,
    15px 15px 0px $twitter-color,
    16px 16px 0px $twitter-color,
    17px 17px 0px $twitter-color,
    18px 18px 0px $twitter-color,
    19px 19px 0px $twitter-color,
    20px 20px 0px $twitter-color,
    21px 21px 0px $twitter-color,
    22px 22px 0px $twitter-color,
    23px 23px 0px $twitter-color,
    24px 24px 0px $twitter-color,
    25px 25px 0px $twitter-color,
    26px 26px 0px $twitter-color,
    27px 27px 0px $twitter-color,
    28px 28px 0px $twitter-color,
    29px 29px 0px $twitter-color,
    30px 30px 0px $twitter-color,
    31px 31px 0px $twitter-color,
    32px 32px 0px $twitter-color,
    33px 33px 0px $twitter-color,
    34px 34px 0px $twitter-color,
    35px 35px 0px $twitter-color,
    36px 36px 0px $twitter-color,
    37px 37px 0px $twitter-color,
    38px 38px 0px $twitter-color,
    39px 39px 0px $twitter-color,
    40px 40px 0px $twitter-color,
  ;
}

.linkedin {
  background: #0e87bf; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #0e87bf 0%, #0e87bf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0e87bf), color-stop(100%,#0e87bf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #0e87bf 0%,#0e87bf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #0e87bf 0%,#0e87bf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #0e87bf 0%,#0e87bf 100%); /* IE10+ */
background: linear-gradient(135deg,  #0e87bf 0%,#0e87bf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e87bf', endColorstr='#0e87bf',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.linkedin:hover {
  background: #0e87bf; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #0e87bf 0%, #075e86 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0e87bf), color-stop(100%,#075e86)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #0e87bf 0%,#075e86 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #0e87bf 0%,#075e86 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #0e87bf 0%,#075e86 100%); /* IE10+ */
background: linear-gradient(135deg,  #0e87bf 0%,#075e86 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e87bf', endColorstr='#075e86',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.logo:hover .fa-linkedin {
   text-shadow: 
    1px 1px 0px $linkedin-color,
    2px 2px 0px $linkedin-color,
    3px 3px 0px $linkedin-color,
    4px 4px 0px $linkedin-color,
    5px 5px 0px $linkedin-color,
    6px 6px 0px $linkedin-color,
    7px 7px 0px $linkedin-color,
    8px 8px 0px $linkedin-color,
    9px 9px 0px $linkedin-color,
    10px 10px 0px $linkedin-color,
    11px 11px 0px $linkedin-color,
    12px 12px 0px $linkedin-color,
    13px 13px 0px $linkedin-color,
    14px 14px 0px $linkedin-color,
    15px 15px 0px $linkedin-color,
    16px 16px 0px $linkedin-color,
    17px 17px 0px $linkedin-color,
    18px 18px 0px $linkedin-color,
    19px 19px 0px $linkedin-color,
    20px 20px 0px $linkedin-color,
    21px 21px 0px $linkedin-color,
    22px 22px 0px $linkedin-color,
    23px 23px 0px $linkedin-color,
    24px 24px 0px $linkedin-color,
    25px 25px 0px $linkedin-color,
    26px 26px 0px $linkedin-color,
    27px 27px 0px $linkedin-color,
    28px 28px 0px $linkedin-color,
    29px 29px 0px $linkedin-color,
    30px 30px 0px $linkedin-color,
    31px 31px 0px $linkedin-color,
    32px 32px 0px $linkedin-color,
    33px 33px 0px $linkedin-color,
    34px 34px 0px $linkedin-color,
    35px 35px 0px $linkedin-color,
    36px 36px 0px $linkedin-color,
    37px 37px 0px $linkedin-color,
    38px 38px 0px $linkedin-color,
    39px 39px 0px $linkedin-color,
    40px 40px 0px $linkedin-color,
  ;
}

.dribbble {
  background: #ea4c89; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ea4c89 0%, #ea4c89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ea4c89), color-stop(100%,#ea4c89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #ea4c89 0%,#ea4c89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #ea4c89 0%,#ea4c89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #ea4c89 0%,#ea4c89 100%); /* IE10+ */
background: linear-gradient(135deg,  #ea4c89 0%,#ea4c89 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4c89', endColorstr='#ea4c89',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.dribbble:hover {
  background: #ea4c89; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ea4c89 0%, #ae2258 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ea4c89), color-stop(100%,#ae2258)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #ea4c89 0%,#ae2258 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #ea4c89 0%,#ae2258 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #ea4c89 0%,#ae2258 100%); /* IE10+ */
background: linear-gradient(135deg,  #ea4c89 0%,#ae2258 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4c89', endColorstr='#ae2258',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.logo:hover .fa-dribbble {
   text-shadow: 
    1px 1px 0px $dribbble-color,
    2px 2px 0px $dribbble-color,
    3px 3px 0px $dribbble-color,
    4px 4px 0px $dribbble-color,
    5px 5px 0px $dribbble-color,
    6px 6px 0px $dribbble-color,
    7px 7px 0px $dribbble-color,
    8px 8px 0px $dribbble-color,
    9px 9px 0px $dribbble-color,
    10px 10px 0px $dribbble-color,
    11px 11px 0px $dribbble-color,
    12px 12px 0px $dribbble-color,
    13px 13px 0px $dribbble-color,
    14px 14px 0px $dribbble-color,
    15px 15px 0px $dribbble-color,
    16px 16px 0px $dribbble-color,
    17px 17px 0px $dribbble-color,
    18px 18px 0px $dribbble-color,
    19px 19px 0px $dribbble-color,
    20px 20px 0px $dribbble-color,
    21px 21px 0px $dribbble-color,
    22px 22px 0px $dribbble-color,
    23px 23px 0px $dribbble-color,
    24px 24px 0px $dribbble-color,
    25px 25px 0px $dribbble-color,
    26px 26px 0px $dribbble-color,
    27px 27px 0px $dribbble-color,
    28px 28px 0px $dribbble-color,
    29px 29px 0px $dribbble-color,
    30px 30px 0px $dribbble-color,
    31px 31px 0px $dribbble-color,
    32px 32px 0px $dribbble-color,
    33px 33px 0px $dribbble-color,
    34px 34px 0px $dribbble-color,
    35px 35px 0px $dribbble-color,
    36px 36px 0px $dribbble-color,
    37px 37px 0px $dribbble-color,
    38px 38px 0px $dribbble-color,
    39px 39px 0px $dribbble-color,
    40px 40px 0px $dribbble-color,
  ;
}