HTML
<ul class="socials">
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-flickr"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
</ul>
LESS
/* Mixins */
.transform(@arguments){
-webkit-transform: @arguments;
-moz-transform: @arguments;
-ms-transform: @arguments;
-o-transform: @arguments;
transform: @arguments;
}
.round(@radius: 3px){
border-radius: @radius;
}
.transition(@duration: 0.3s; @property: all; @timing-function: ease-in-out; @delay: 0){
-webkit-transition: @arguments;
transition: @arguments;
}
.radial-gradient(@first-color: #fff; @second-color: #000; @position: center; @stop: 60%){
background-color: @first-color;
background-image: -webkit-radial-gradient(@position, @first-color, @second-color @stop);
background-image: -moz-radial-gradient(@position, @first-color, @second-color @stop);
background-image: -ms-radial-gradient(@position, @first-color, @second-color @stop);
background-image: -o-radial-gradient(@position, @first-color, @second-color @stop);
background-image: radial-gradient(@position, @first-color, @second-color @stop);
}
/* Animations */
@-webkit-keyframes puff{
0%{
opacity: 1;
.transform(scale(1));
}
100%{
opacity: 0;
.transform(scale(1.7));
}
}
@keyframes puff{
0%{
opacity: 1;
.transform(scale(1));
}
100%{
opacity: 0;
.transform(scale(1.7));
}
}
/* Styles */
body{
color: white;
background: #343434;
font-family: sans-serif;
text-align: center;
padding-top: 26%;
&:before{
content: '';
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
.radial-gradient(circle, rgba(255, 255, 255, 0.06); transparent);
}
}
a{
color: white;
}
.socials{
text-align: center;
li{
display: inline-block;
margin-left: 6px;
margin-right: 6px;
a{
color: white;
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid white;
.round(50em);
.transition(@timing-function: ease-out);
position: relative;
i{
font-size: 1.5em;
line-height: 2.2em;
}
&:after{
content: '';
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: -1px;
left: -1px;
border: 1px solid #fff;
.transition;
.round(50em);
opacity: 0;
}
&:before{
content: '';
display: inline-block;
width: 50px;
height: 50px;
position: absolute;
top: -1px;
left: -1px;
border: 1px solid #fff;
.transition;
.round(50em);
opacity: 0;
}
&:hover{
.transform(scale(1.2));
&:after{
-webkit-animation: puff 0.5s ease-in alternate;
animation: puff 0.5s ease-in alternate;
}
&:before{
-webkit-animation: puff 0.6s 0.18s ease-in-out alternate;
animation: puff 0.6s 0.18s ease-in-out alternate;
}
}
}
}
}
