Beautiful Social Media Links with HTML & CSS Source Codes
Great social media widget can help in building your website’s reputation. Today I want to show you a simple, clean and yet beautiful social media links design. All the HTML and CSS source codes in this page are self explanatory with key codes highlighted and ready for use in your own website. Replace the links with your own and make your website more attractive.
#hsocial .twitter, #hsocial .twitter:visited {
background: url("twitter.png") no-repeat 10px center rgb(0, 172, 237);
}
#hsocial .facebook, #hsocial .facebook:visited {
background: url("facebook.png") no-repeat 10px center rgb(59, 89, 152);
}
#hsocial .gplus, #hsocial .gplus:visited {
background: url("gplus.png") no-repeat 10px center rgb(184, 51, 36);
}
#hsocial .digg, #hsocial .digg:visited {
background: url("digg.png") no-repeat 10px center rgb(0, 0, 0);
}
#hsocial .stumbleupon, #hsocial .stumbleupon:visited {
background: url("stumbleupon.png") no-repeat 10px center rgb(66, 174, 67);
}
#hsocial .pinterest, #hsocial .pinterest:visited {
background: url("pinterest.png") no-repeat 10px center rgb(216, 58, 62);
}
#hsocial a,#hsocial a:visited{
display:inline-block;
margin-right:5px;
margin-bottom:5px;
padding:10px 15px 10px 40px;
color:white;
font-weight:bold;
text-transform:uppercase;
font-size:14px;
font-family:'montserratbold',sans-serif;
-webkit-transition:all .15s ease-in-out;
-moz-transition:all .15s ease-in-out;
-ms-transition:all .15s ease-in-out;
-o-transition:all .15s ease-in-out;
transition:all .15s ease-in-out;
}
#hsocial a:hover,#hsocial a:visited:hover{
-webkit-opacity:.5;-moz-opacity:.5;opacity:.5;color:white
}
#hsocial a, a:visited {
text-decoration: none;
}
#hsocial{width:350px;}