Edit in JSFiddle

html{
    background-color:#aaaaaa;    
}
ul{
    color: #C2C4C8;
    margin:0px;
    padding:0px;
    width:100%;
}

ul li{
    float:left;
    list-style:none;
    display:block;
    border-right:1px solid #3A434F;
    width:50px;
    height:50px;
    display:block;
    overflow:hidden;
    background-color:#272D36;
}

ul li:first-child{
    border-left:1px solid #3A434F;
}

ul li a{
    width:50px;
    height:50px;
    display:block;
    transition: all 		300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 	300ms ease-in-out; /** Firefox **/
    -o-transition: all 		300ms ease-in-out; /** Opera **/
    text-decoration:none;    
}

i.socialAnimate1{
    font-size:20px;
    color:#606E82;
    width:50px;
    height:50px;
    line-height:50px;
    display:block;
    text-align:center;
}

i.socialAnimate2{
    font-size:20px;
    width:50px;
    height:50px;
    line-height:50px;
    display:block;
    text-align:center;
    color:#ffffff;
}

ul li a:hover {
    -ms-transform: translateY(-50px); /* IE 9 */
    -webkit-transform: translateY(-50px); /* Chrome, Safari, Opera */
    transform: translateY(-50px); /* Standard syntax */
}

ul li a:hover .fa-facebook{
	color:#0D67BC;
}
ul li a:hover .fa-twitter{
	color:#16D2FC;
}
ul li a:hover .fa-google{
	color:#EA7704;
}
ul li a:hover .fa-pinterest{
	color:#EA0909;
}