<div class="container">
<h1>CSS3 Social <span>bu</span>ttons vol.1</h1>
<div class="effect aeneas">
<h2>Aeneas</h2>
<div class="buttons">
<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="dribbble" title="Join us on Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#" class="vimeo" title="Join us on Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#" class="pinterest" title="Join us on Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect jaques">
<h2>Jaques</h2>
<div class="buttons">
<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="dribbble" title="Join us on Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#" class="vimeo" title="Join us on Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#" class="pinterest" title="Join us on Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect egeon">
<h2>Egeon</h2>
<div class="buttons">
<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="dribbble" title="Join us on Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#" class="vimeo" title="Join us on Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#" class="pinterest" title="Join us on Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect claudio">
<h2>Claudio</h2>
<div class="buttons">
<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="dribbble" title="Join us on Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#" class="vimeo" title="Join us on Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#" class="pinterest" title="Join us on Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="effect laertes">
<h2>Laertes</h2>
<div class="buttons">
<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="g-plus" title="Join us on Google+"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="dribbble" title="Join us on Dribbble"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#" class="vimeo" title="Join us on Vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a>
<a href="#" class="pinterest" title="Join us on Pinterest"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</div>
//variables
$basic-dark-color: #212121;
$basic-light-color: #fff;
$fb-color: #3b5998;
$tw-color: #00aced;
$g-plus: #dd4b39;
$dribbble: #ea4c89;
$pinterest: #cb2027;
$insta: #bc2a8d;
$in: #007bb6;
$vimeo: #1ab7ea;
$border-radius: 10px;
$font-size: 25px;
/*common styles !!!YOU DON'T NEED THEM */
.container {
margin: 60px auto 0px auto;
text-align: center;
h1 {
font: {
family: 'Roboto', sans-serif;
weight: 900;
size: 30px;
}
text-transform: uppercase;
color: $basic-dark-color;
letter-spacing: 3px;
span {
display: inline-block;
&:before,
&:after {
content: "";
display: block;
width: 34px;
height: 2px;
background-color: $basic-dark-color;
margin: 0px 0px 0px 2px;
}
}
}
}
.effect {
width: 100%;
padding: 50px 0px 70px 0px;
background-color: $basic-dark-color;
h2 {
color: $basic-light-color;
font: {
family: 'Playfair Display', serif;
weight: 400;
size: 25px;
}
letter-spacing: 3px;
}
&:nth-child(2) {
margin-top: 50px;
}
&:nth-child(2n+1) {
background-color: $basic-light-color;
h2 {
color: $basic-dark-color;
}
}
.buttons {
margin-top: 50px;
display: flex;
justify-content: center;
}
a {
&:last-child {
margin-right: 0px;
}
}
}
/*common link styles !!!YOU NEED THEM*/
.effect {
/*display: flex; !!!uncomment this line !!!*/
a {
text-decoration: none !important;
color: $basic-light-color;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: $border-radius;
margin-right: 20px;
font-size: $font-size;
overflow: hidden;
position: relative;
i {
position: relative;
z-index: 3;
}
&.fb {
background-color: $fb-color;
}
&.tw {
background-color: $tw-color;
}
&.g-plus {
background-color: $g-plus;
}
&.dribbble {
background-color: $dribbble;
}
&.pinterest {
background-color: $pinterest;
}
&.insta {
background-color: $insta;
}
&.in {
background-color: $in;
}
&.vimeo {
background-color: $vimeo;
}
}
}
/* aeneas effect */
.effect.aeneas {
a {
transition: transform 0.4s linear 0s, border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
i {
transition: transform 0.4s linear 0s;
}
&:hover {
transform: rotate(360deg);
border-radius: 50%;
i {
transform: rotate(-360deg);
}
}
}
}
/* jaques effect */
.effect.jaques {
a {
transition: border-top-left-radius 0.1s linear 0s, border-top-right-radius 0.1s linear 0.1s, border-bottom-right-radius 0.1s linear 0.2s, border-bottom-left-radius 0.1s linear 0.3s;
&:hover {
border-radius: 50%;
}
}
}
/* egeon effect */
.effect.egeon {
a {
transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
i {
transition: transform 0.2s linear 0s;
}
&:hover {
transform: rotate(-90deg);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
i {
transform: rotate(90deg);
}
}
}
}
/* claudio effect */
.effect.claudio {
a {
transition: transform 0.2s linear 0s, border-radius 0.2s linear 0s;
&:hover {
transform: scale(1.2);
border-bottom-left-radius: 50%;
border-top-right-radius: 50%;
}
}
}
/* laertes effect */
.effect.laertes {
a {
transition: all 0.2s linear 0s;
i {
transition: all 0.2s linear 0s;
}
&:hover {
border-radius: 50%/20%;
i {
transform: scale(1.1);
text-shadow: 0 0 12px rgba($basic-dark-color, 0.6);
}
}
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.