Sticky Social Media Icons

THE HTML

<ul id=”social_side_links”>

<li><a style=”background-color: #3c5a96;” href=”https://facebook.com” target=”_blank”><img src=”https://www.dropbox.com/s/xk5pdj8nks1ymdh/facebook-icon.png?raw=1″ alt=”” /></a></li>

<li><a style=”background-color: #1dadeb;” href=”https://twitter.com” target=”_blank”><img src=”https://www.dropbox.com/s/c8in3qcf1uqsqrb/twitter-icon.png?raw=1″ alt=”” /></a></li>

<li><a style=”background-color: #1178b3;” href=”https://linkedin.com” target=”_blank”><img src=”https://www.dropbox.com/s/pb0a0p7p1pwprue/linkedin-icon.png?raw=1″ alt=”” /></a></li>

</ul>

THE CSS

/*—————————————————————SOCIAL LINKS*/

#social_side_links {
position: fixed;
top: 280px;
right: 0;
padding: 0;
list-style: none;
z-index: 99;
}

#social_side_links li a {display: block;}

#social_side_links li a img {
display: block;
max-width:25px;
padding: 10px;
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
-o-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
margin-bottom:10px;
}

#social_side_links li a:hover img {background: rgba(0, 0, 0, .2);}

Leave a Reply

Your email address will not be published. Required fields are marked *