A Pen by Jean Luc Houedanou.

blEnt.markdown

blEnt

A Pen by Jean Luc Houedanou on CodePen.

License.

index.html

         <div id="rezowrapper" class="ym-grid">
            <div id="facebook" class="rezo ym-g25 ym-gl">
               <a href="#"><i class="fa fa-facebook"></i></a>
            </div>
            <div id="twitter" class="rezo ym-g25 ym-gl">
               <a href="#"><i class="fa fa-twitter"></i></a>
            </div>
            <div id="googleplus" class="rezo ym-g25 ym-gl">
               <a href="#"><i class="fa fa-google-plus"></i></a>
            </div>
            <div id="linkedin" class="rezo ym-g25 ym-gl">
               <a href="#"><i class="fa fa-linkedin"></i></a>
            </div>

style.css

/*Twitter*/
#twitter{
    background:#00ACED;
}
/*Facebook*/
#facebook{
    background:#3B5998;
}
/*Google Plus*/
#googleplus{
    background:#D34836;
}
#linkedin{
    background:#1D87BD;
}
.rezo a{
    display: block;
    float:left;
    border-radius: 10px;
    box-shadow: 0 -5px 0 0 rgba(0, 0, 0, 0.2) inset;
    box-sizing: border-box;
    height: 98px;
  margin:0 5px;
    line-height: 100px;
    margin: 0 auto;
    padding-top: 15px;
    text-align: center;
    transition: all 0.25s ease 0s;
    width: 98px;
}
.rezo a i{
    font-size:40px;
    color:white;
}