Выдвигающиеся значки соцкнопок при клике CSS

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;
}

Источник
Оцените статью
( Пока оценок нет )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий