Redes Sociais com efeito

Redes Sociais, Script e CSS
[CSS INICIO]
/* -------------- Botões Redes Sociais --------- */
.nav-tt{
padding: 50; width: 75%; /* -------------- Largura das margens --------- */ height: 0px; /* -------------- Altura das margens --------- */
}
.nav-tt li{ float: left; /* -------------- Alinhamento dos botões --------- */ list-style: none;
}
.nav-tt li a{ display: block; width: 48px; /* -------------- Largura dos ícones --------- */ height: 48px; /* -------------- Altura dos ícones --------- */ margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px; text-decoration: none;
}
.nav-tt li .gplus{ background: url(URL DA IMAGEM ÍCONE DO GOOGLE+) no-repeat;
}
.nav-tt li .twitter{ background: url(URL DA IMAGEM ÍCONE DO TWITTER) no-repeat;
}
.nav-tt li .pinterest{ background: url(URL DA IMAGEM ÍCONE DO PINTEREST) no-repeat;
}
.nav-tt li .facebook{ background: url(URL DA IMAGEM ÍCONE DO FACEBOOK) no-repeat;
}
.nav-tt li .linkedin{ background: url(URL DA IMAGEM ÍCONE DO LINKEDIN) no-repeat;
}
.nav-tt li .tumblr{ background: url(URL DA IMAGEM ÍCONE DO TUMBLR) no-repeat;
}
.nav-tt li .youtube{ background: url(URL DA IMAGEM ÍCONE DO YOUTUBE) no-repeat;
}
.nav-tt li .mail{ background: url(URL DA IMAGEM ÍCONE DO E-MAIL) no-repeat;
}
.nav-tt li .rss{ background: url(URL DA IMAGEM ÍCONE DO RSS) no-repeat;
}
.nav-tt li a span{ width: 80px; /* -------------- Largura do arco de efeito --------- */ height: 80px; /* -------------- Altura do arco de efeito --------- */ line-height: 80px; padding: 15px; left: 50%; /* -------------- Alinhamento a esquerda --------- */ margin-left: -60px; font-family: 'Alegreya SC', Georgia, serif; /* -------------- Tipo de fonte --------- */ font-weight: 400; font-style: italic; /* -------------- Estilo da fonte --------- */ font-size: 18px; /* -------------- Tamanho da fonte --------- */ color: #000DFF; /* -------------- Cor da fonte --------- */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; /* --------------