Each social media icon will display the relevant colour on hover, using font-awesome's icons - no images needed, fully scalable. Simply change the background colour to match your website.
A Pen by Lauren Clark on CodePen.
<div class="footer-social-icons"> | |
<h4 class="_14">Follow us on</h4> | |
<ul class="social-icons"> | |
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li> | |
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li> | |
<li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li> | |
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li> | |
<li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li> | |
<li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li> | |
</ul> | |
</div> |
@import url(https://fonts.googleapis.com/css?family=Lato); | |
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css); | |
body { | |
font-family: 'Lato', sans-serif; | |
color: #FFF; | |
background: #322f30; | |
-webkit-font-smoothing: antialiased; | |
} | |
a { | |
text-decoration: none; | |
color: #fff; | |
} | |
p > a:hover{ | |
color: #d9d9d9; | |
text-decoration: underline; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
margin: 1% 0 1% 0; | |
} | |
._12 { | |
font-size: 1.2em; | |
} | |
._14 { | |
font-size: 1.4em; | |
} | |
ul { | |
padding:0; | |
list-style: none; | |
} | |
.footer-social-icons { | |
width: 350px; | |
display:block; | |
margin: 0 auto; | |
} | |
.social-icon { | |
color: #fff; | |
} | |
ul.social-icons { | |
margin-top: 10px; | |
} | |
.social-icons li { | |
vertical-align: top; | |
display: inline; | |
height: 100px; | |
} | |
.social-icons a { | |
color: #fff; | |
text-decoration: none; | |
} | |
.fa-facebook { | |
padding:10px 14px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-facebook:hover { | |
background-color: #3d5b99; | |
} | |
.fa-twitter { | |
padding:10px 12px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-twitter:hover { | |
background-color: #00aced; | |
} | |
.fa-rss { | |
padding:10px 14px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-rss:hover { | |
background-color: #eb8231; | |
} | |
.fa-youtube { | |
padding:10px 14px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-youtube:hover { | |
background-color: #e64a41; | |
} | |
.fa-linkedin { | |
padding:10px 14px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-linkedin:hover { | |
background-color: #0073a4; | |
} | |
.fa-google-plus { | |
padding:10px 9px; | |
-o-transition:.5s; | |
-ms-transition:.5s; | |
-moz-transition:.5s; | |
-webkit-transition:.5s; | |
transition: .5s; | |
background-color: #322f30; | |
} | |
.fa-google-plus:hover { | |
background-color: #e25714; | |
} |