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
Σχόλια