HTML
Подключаем Font Awesome (шрифт для иконок)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="wrapper">
<input id="switcher" type="checkbox"/>
<label for="switcher">
<i class="fa fa-share-alt fa-2x"></i>
</label>
<div class="circle2">
<i class="fa fa-pinterest-p fa-2x"></i>
</div>
<div class="circle3">
<i class="fa fa-facebook fa-2x"></i>
</div>
<div class="circle4">
<i class="fa fa-twitter fa-2x"></i>
</div>
<div class="circle5">
<i class="fa fa-google-plus fa-2x"></i>
</div>
</div>
CSS
.wrapper {
width: 400px;
height: 400px;
position: relative;
top: 100px;
left: 100px;
}
.circle2 {
width: 75px;
height: 75px;
display: flex;
color: white;
align-items: center;
justify-content: center;
position: absolute;
z-index: 4;
top: 37.5px;
left: 37.5px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.circle3 {
width: 75px;
height: 75px;
display: flex;
color: white;
align-items: center;
justify-content: center;
position: absolute;
z-index: 3;
top: 37.5px;
left: 37.5px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.circle4 {
width: 75px;
height: 75px;
display: flex;
color: white;
align-items: center;
justify-content: center;
position: absolute;
z-index: 2;
top: 37.5px;
left: 37.5px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.circle5 {
width: 75px;
height: 75px;
display: flex;
color: white;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
top: 37.5px;
left: 37.5px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
label {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 7;
width: 75px;
height: 75px;
background-color: black;
cursor: pointer;
top: 37.5px;
left: 37.5px;
color: #2E2E2E;
border-bottom: solid 2px #666;
}
input {
display: none;
}
#switcher:checked ~ label {
color: #666;
-webkit-transition: color 0.2s ease-out 0.1s;
-moz-transition: color 0.2s ease-out 0.1s;
transition: color 0.2s ease-out 0.1s;
}
#switcher:checked ~ .circle2 {
top: 37.5px;
left: 112.5px;
background-color: #cb2027;
-webkit-transition: all 0.3s ease-out 0.1s;
-moz-transition: all 0.3s ease-out 0.1s;
transition: all 0.3s ease-out 0.1s;
}
#switcher:checked ~ .circle3 {
top: 37.5px;
left: -37.5px;
background-color: #3b5998;
-webkit-transition: all 0.3s ease-out 0.1s;
-moz-transition: all 0.3s ease-out 0.1s;
transition: all 0.3s ease-out 0.1s;
}
#switcher:checked ~ .circle4 {
top: -37.5px;
left: 37.5px;
background-color: #00aced;
-webkit-transition: all 0.3s ease-in-out 0.3s;
-moz-transition: all 0.3s ease-in-out 0.3s;
transition: all 0.3s ease-in-out 0.3s;
}
#switcher:checked ~ .circle5 {
top: 112.5px;
left: 37.5px;
background-color: #dd4b39;
-webkit-transition: all 0.3s ease-in-out 0.3s;
-moz-transition: all 0.3s ease-in-out 0.3s;
transition: all 0.3s ease-in-out 0.3s;
}
