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