A Pen by Jordan.

CuoDG.markdown

CuoDG

A Pen by Jordan on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="div1">
<a href="#"><i class="social-btn fa fa-facebook"></i></a>
<a href="#"><i class="social-btn fa fa-twitter"></i></a>
<a href="#"><i class="social-btn fa fa-rss"></i></a>
</div>
<div id="div2">
<a href="#"><i class="social-btn fa fa-facebook"></i></a>
<a href="#"><i class="social-btn fa fa-twitter"></i></a>
<a href="#"><i class="social-btn fa fa-rss"></i></a>
</div>
<div id="div3">
<a href="#"><i class="social-btn fa fa-facebook"></i></a>
<a href="#"><i class="social-btn fa fa-twitter"></i></a>
<a href="#"><i class="social-btn fa fa-rss"></i></a>
</div>

style.scss

@import "compass/css3";
 $color-primary: #832718;
 $color-secondary: #fff;
 $color-navy:#2980b9;
 $color-blue:#C5EFF7;
 $color-orange:#e67e22;

div{
  margin-bottom: 20px;
}

#div1 .social-btn{
    border-radius: 50%;
}
#div2 .social-btn{
    border-radius: 25%;
}
#div3 .social-btn{
    border-radius: 0%;
}


.social-btn{
    background-color: $color-primary;
    opacity: 0.2;
    text-align: center;
    text-decoration: none;
    color: $color-secondary;
    display: inline-block;
    font-size: 2em;
    vertical-align:middle;
    width: 44px;
    height: 44px;
    line-height: 48px !important;
    overflow: hidden;
    margin: 0 3px;
    text-shadow: 
    1px 1px darken($color-primary, 10%),
    2px 2px darken($color-primary, 10%),
    3px 3px darken($color-primary, 10%),
    4px 4px darken($color-primary, 10%),
    5px 5px darken($color-primary, 10%),
    6px 6px darken($color-primary, 10%),
    7px 7px darken($color-primary, 10%),
    8px 8px darken($color-primary, 10%),
    9px 9px darken($color-primary, 10%),
    10px 10px darken($color-primary, 10%),
    11px 11px darken($color-primary, 10%),
    12px 12px darken($color-primary, 10%),
    13px 13px darken($color-primary, 10%),
    14px 14px darken($color-primary, 10%),
    15px 15px darken($color-primary, 10%),
    16px 16px darken($color-primary, 10%),
    17px 17px darken($color-primary, 10%),
    18px 18px darken($color-primary, 10%),
    19px 19px darken($color-primary, 10%),
    20px 20px darken($color-primary, 10%),
    21px 21px darken($color-primary, 10%),
    22px 22px darken($color-primary, 10%)
}
a:nth-child(1):hover .social-btn{
    background-color: $color-navy;
    opacity: 1;
    text-shadow: 
    1px 1px darken($color-navy, 5%),
    2px 2px darken($color-navy, 5%),
    3px 3px darken($color-navy, 5%),
    4px 4px darken($color-navy, 5%),
    5px 5px darken($color-navy, 5%),
    6px 6px darken($color-navy, 5%),
    7px 7px darken($color-navy, 5%),
    8px 8px darken($color-navy, 5%),
    9px 9px darken($color-navy, 5%),
    10px 10px darken($color-navy, 5%),
    11px 11px darken($color-navy, 5%),
    12px 12px darken($color-navy, 5%),
    13px 13px darken($color-navy, 5%),
    14px 14px darken($color-navy, 5%),
    15px 15px darken($color-navy, 5%),
    16px 16px darken($color-navy, 5%),
    17px 17px darken($color-navy, 5%),
    18px 18px darken($color-navy, 5%),
    19px 19px darken($color-navy, 5%),
    20px 20px darken($color-navy, 5%),
    21px 21px darken($color-navy, 5%),
    22px 22px darken($color-navy, 5%)
}
a:nth-child(2):hover .social-btn{
    background-color: $color-blue;
    opacity: 1;
    text-shadow: 
    1px 1px darken($color-blue, 5%),
    2px 2px darken($color-blue, 5%),
    3px 3px darken($color-blue, 5%),
    4px 4px darken($color-blue, 5%),
    5px 5px darken($color-blue, 5%),
    6px 6px darken($color-blue, 5%),
    7px 7px darken($color-blue, 5%),
    8px 8px darken($color-blue, 5%),
    9px 9px darken($color-blue, 5%),
    10px 10px darken($color-blue, 5%),
    11px 11px darken($color-blue, 5%),
    12px 12px darken($color-blue, 5%),
    13px 13px darken($color-blue, 5%),
    14px 14px darken($color-blue, 5%),
    15px 15px darken($color-blue, 5%),
    16px 16px darken($color-blue, 5%),
    17px 17px darken($color-blue, 5%),
    18px 18px darken($color-blue, 5%),
    19px 19px darken($color-blue, 5%),
    20px 20px darken($color-blue, 5%),
    21px 21px darken($color-blue, 5%),
    22px 22px darken($color-blue, 5%)
}
a:nth-child(3):hover .social-btn{
    background-color: $color-orange;
    opacity: 1;
    text-shadow: 
    1px 1px darken($color-orange, 5%),
    2px 2px darken($color-orange, 5%),
    3px 3px darken($color-orange, 5%),
    4px 4px darken($color-orange, 5%),
    5px 5px darken($color-orange, 5%),
    6px 6px darken($color-orange, 5%),
    7px 7px darken($color-orange, 5%),
    8px 8px darken($color-orange, 5%),
    9px 9px darken($color-orange, 5%),
    10px 10px darken($color-orange, 5%),
    11px 11px darken($color-orange, 5%),
    12px 12px darken($color-orange, 5%),
    13px 13px darken($color-orange, 5%),
    14px 14px darken($color-orange, 5%),
    15px 15px darken($color-orange, 5%),
    16px 16px darken($color-orange, 5%),
    17px 17px darken($color-orange, 5%),
    18px 18px darken($color-orange, 5%),
    19px 19px darken($color-orange, 5%),
    20px 20px darken($color-orange, 5%),
    21px 21px darken($color-orange, 5%),
    22px 22px darken($color-orange, 5%)
}