Codly

html

<div class="kenovadageds"> 
   
  <a href="#" target="_blank" class="kenovadaged whatsapp" tooltip="Ватсап"><i class="fab fa-whatsapp"></i></a>  
   
  <a href="#" target="_blank" class="kenovadaged fb" tooltip="Фейсбук"><i class="fab fa-facebook-f"></i></a> 

  <a href="#" target="_blank" class="kenovadaged gplus" tooltip="Гугл +"><i class="fab fa-google-plus-g"></i></a> 

  <a href="#" target="_blank" class="kenovadaged twitt" tooltip="Твиттер"><i class="fab fa-twitter"></i></a> 

  <a href="#" target="_blank" class="kenovadaged pinteres" tooltip="Пинтерест"><i class="fab fa-pinterest-p"></i></a> 

  <a target="_blank" class="kenovadaged mainkenovadaged" tooltip="Поделиться"><i class="fas fa-share-alt"></i></a> 
   
</div>

css

.kenovadageds { 
  bottom: 5%; 
  position: fixed; 
  margin: 1em; 
  left: 0; 
} 
.kenovadaged { 
  display: block; 
  width: 55px; 
  height: 55px; 
  border-radius: 100%; 
  text-align: center; 
  color: #f5eeee; 
  margin: 14px auto 0; 
  box-shadow: 0px 5px 11px -2px rgba(19, 18, 18, 0.18), 0px 4px 12px -7px rgba(16, 16, 16, 0.15); 
  cursor: pointer; 
  -webkit-transition: all .1s ease-out; 
  transition: all .1s ease-out; 
  position: relative; 
} 
.kenovadaged > i { 
  font-size: 28px; 
  line-height: 55px; 
  transition: all .2s ease-in-out; 
  transition-delay: 2s; 
} 
.kenovadaged:active, 
.kenovadaged:focus, 
.kenovadaged:hover { 
  box-shadow: 0 0 4px rgba(12, 12, 12, 0.14), 0 4px 8px rgba(16, 16, 16, 0.28); 
} 
.kenovadaged:not(:last-child) { 
  width: 55px; 
  height: 55px; 
  margin: 15px auto 0; 
  opacity: 0; 
} 
.kenovadaged:not(:last-child) > i { 
  font-size: 23px; 
  line-height: 55px; 
  transition: all .3s ease-in-out; 
} 
.kenovadageds:hover .kenovadaged:not(:last-child) { 
  opacity: 1; 
  width: 55px; 
  height: 55px; 
  margin: 15px auto 0; 
} 
.kenovadaged:nth-last-child(1) { 
  -webkit-transition-delay: 25ms; 
  transition-delay: 25ms; 
} 
.kenovadaged:not(:last-child):nth-last-child(2) { 
  -webkit-transition-delay: 20ms; 
  transition-delay: 20ms; 
} 
.kenovadaged:not(:last-child):nth-last-child(3) { 
  -webkit-transition-delay: 40ms; 
  transition-delay: 40ms; 
} 
.kenovadaged:not(:last-child):nth-last-child(4) { 
  -webkit-transition-delay: 60ms; 
  transition-delay: 60ms; 
} 
.kenovadaged:not(:last-child):nth-last-child(5) { 
  -webkit-transition-delay: 80ms; 
  transition-delay: 80ms; 
} 
.kenovadaged:not(:last-child):nth-last-child(6) { 
  -webkit-transition-delay: 100ms; 
  transition-delay: 100ms; 
} 

[tooltip]:before { 
  font-family: 'Roboto'; 
  font-weight: 600; 
  border-radius: 2px; 
  background-color: #4e4b4b; 
  color: #f5eeee; 
  content: attr(tooltip); 
  font-size: 12px; 
  visibility: hidden; 
  opacity: 0; 
  padding: 4px 6px; 
  margin-left: 10px; 
  position: absolute; 
  left: 100%; 
  bottom: 18%; 
  white-space: nowrap; 
} 

[tooltip]:hover:before, 
[tooltip]:hover:after { 
  visibility: visible; 
  opacity: 1; 
} 
.kenovadaged.mainkenovadaged { 
  background: #1ea6c3; 
} 
.kenovadaged.gplus { 
  background: #d42c20; 
} 
.kenovadaged.pinteres { 
  background: #f51134; 
} 
.kenovadaged.twitt { 
  background: #14a9ec; 
} 
.kenovadaged.fb { 
  background: #3F51B5; 
} 
.kenovadaged.whatsapp { 
  background: #15dc7b; 
}