NeatNait social share buttons




Αντιγραφή επικόλληση τον παρακάτω κώδικα:

<style>
/* foulscode.blogspot.gr */
@import url(http://fonts.googleapis.com/css?family=Dosis);

body{
  background:#ddd;
  margin:20px;
  text-align:center;
}

ul{
  list-style:none;
  margin:auto;
  display:inline-block;
}

ul li{
  width:110px;
  height:130px;
  float:left;
  background:#FDFCFA;
  position:relative;
  transition: all .5s ease;
  overflow:hidden;
}

li h1{
  font-family: 'Dosis', sans-serif;
  font-weight:normal;
  text-align:center;
  line-height:60px;
  font-size:30px;
  transition: all .5s ease;
}

li:hover{
  box-shadow:inset 0 0 10px #2D2D2D; 
}

li:hover h1{
  transform: scale(.8) translateY(-5px);
}

li:hover .button{
  transform: translateY(0px);
}

li .button{ 
  height:50px;
  transform: translateY(25px);
  text-align:center;
  padding:5px 10px;
  padding-bottom:50px;
  color:white;
  width:100%;
  position:absolute;
  bottom:0;
  background:#2D2D2D;
  box-sizing:border-box;
  transition: all .5s .5s ease;
  line-height:25px;
  font-size:15px;
}

.button i{
  font-size:20px;
}

.button.blue{
  background:#24C9FF;
}

.button.pink{
  background:#E12148;
}

.button.green{
  background:#71F264;
}






.neatnait-love{
  width:250px;
  margin:auto;
  margin-top:5em;
  font-weight:300;
  font-family: 'Roboto', sans-serif;
  text-shadow:0 5px 20px #000;
  color:white;
  background:#111;
  padding:2em 6em 2em 4em;
  position:fixed;
  bottom:10%;
  left:50%;
  margin-left:-125px;
  box-sizing:border-box;
}

a{
  text-decoration:none;
  color:#f06;
  border-bottom:1px solid white;
  padding-bottom:5px;
  transition:border .5s ease;
}

a:hover{
  border-color:#111;
  color:#f06;
  border-bottom:4px solid white;
}
/* foulscode.blogspot.gr */
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<ul>
  <li>
    <h1>23</h1>
    <div class="button">
      <i class="fa fa-github"></i>
      <br>
      another star?
    </div>
  </li>
  <li>
    <h1>93</h1>
    <div class="button blue">
      <i class="fa fa-twitter"></i>
      <br>
      go n' tweet it!
    </div>
  </li>
  <li>
    <h1>52</h1>
    <div class="button pink">
      <i class="fa fa-pinterest"></i>
      <br>
      let's pin this!
    </div>
  </li>
  <li>
    <h1>61</h1>
    <div class="button green">
      <i class="fa fa-vine"></i>
      <br>
      revine now!
    </div>
  </li>
  <li>
    <h1>239</h1>
    <div class="button">
      <i class="fa fa-google-plus"></i>
      <br>
      plus one?
    </div>
  </li>
</ul>



<h3 class="neatnait-love">
  made with love at
  @<a href="http://foulscode.blogspot.com">foulscode</a>
</h3>



DEMO
Σχόλια