Social Media
Ένα όμορφο και καινούριο Widget για το blog και το site σας.
Αντιγραφή επικόλληση τον παρακάτω κώδικα!
<style>
/* www.foulscode.com */
body {
background-color:#BFBFBF;
font-family: Helvetica, Arial;
padding-top: 100px;
text-align:center;
}
a {
background: #D2D7D3;
color:#222;
display: inline-block;
text-align:center;
text-decoration:none;
position: relative;
width:40px;
height:28px;
margin:0 2px;
padding-top:12px;
-webkit-transition: all .5s;
transition: all .5s;
}
a.facebook {
background: #D2D7D3 url(http://i.imgur.com/yflN00F.png) no-repeat center;
}
a.twitter {
background: #D2D7D3 url(http://i.imgur.com/ewQqTB1.png) no-repeat center;
}
a.github {
background: #D2D7D3 url(http://i.imgur.com/n3bmN8f.png) no-repeat center;
}
a.dribbble {
background: #D2D7D3 url(http://i.imgur.com/8c5A1ay.png) no-repeat center;
}
a.pinterest {
background: #D2D7D3 url(http://i.imgur.com/s8bNLol.png) no-repeat center;
}
a span {
background:#fff;
color:#222;
font-size:14px;
font-weight: bold;
position:absolute;
bottom:0;
left:-25px;
right:-25px;
padding:5px 7px;
visibility:hidden;
opacity:0;
-webkit-transition: all .4s;
transition: all .4s;
}
/* bottom arrow */
a span:before {
content:'';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position:absolute;
bottom:-5px;
left:40px;
}
a:hover span {
bottom:50px;
visibility:visible;
opacity:1;
}
/* colors */
a.facebook:hover {
background-color: #4183D7;
color: #BFBFBF;
}
a.facebook span {
color:#4183D7;
}
a.twitter:hover {
background-color: #19B5FE;
color: #fff;
}
a.twitter span {
color:#19B5FE;
}
a.github:hover {
background-color: #000;
color: #fff;
}
a.github span {
color:#000;
}
a.dribbble:hover {
background-color: #F62459;
color: #fff;
}
a.dribbble span {
color:#F62459;
}
a.pinterest:hover {
background-color: #F22613;
color: #fff;
}
a.pinterest span {
color:#F22613;
}
/* www.foulscode.com */
</style>
<div>
<a href="www.foulscode.com" class="facebook"><span>Facebook</span></a>
<a href="www.foulscode.com" class="twitter"><span>Twitter</span></a>
<a href="www.foulscode.com" class="github"><span>GitHub</span></a>
<a href="www.foulscode.com" class="dribbble"><span>Dribbble</span></a>
<a href="www.foulscode.com" class="pinterest"><span>Pinterest</span></a>
</div>
LIVE DEMO
Σχόλια