Menu de redes sociais com efeito hover

Views:
<div style="text-align: center;">
<a href="mailto:ayudadeblogger@gmail.com" class="email" data-original-title="" title="" style="
    color: #DF013A;
"><i class="fa fa-envelope" style="
    color: #DF013A;
    float: center;
    padding: 4px 20px 0 0;
"></i>ayudadeblogger@gmail.com</a></div>
<br/>
<br/>
<div style="text-align: center;">
<div id="footer-social-icons">
<a href="https://www.facebook.com/" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://plus.google.com/" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
<a href="https://www.instagram.com/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://www.pinterest.com/" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
</div></div>
<style>
#footer-social-icons a {
background: #DF013A;
color: #fff;
display: inline-block;
text-align: center;
font-size: 24px;
    width: 50px;
    height: 50px;
    line-height: 50px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#footer-social-icons a:hover{
background: #2e2e2e;
}
.list-label-widget-content li a {
position: relative;
display: block;
background-color: #f7f7f7;
margin-bottom: 5px;
padding: 10px;
font-size: 0.875rem;
text-transform: capitalize;
color: #777;
}
.list-label-widget-content li a:before {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #E6E6E6;
position: absolute;
top: 13px;
right: 7px;
}
html[dir="rtl"] .list-label-widget-content li a:before {
right: auto;
left: 7px;
}
.list-label-widget-content li a:hover {
padding-left: 20px;
background-color: #04B404;
color: #fff;
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css' rel='stylesheet'/>