Кнопки соц.сетей с эффектом на CSS

В редакторе

Кнопки соц.сетей с эффектом на CSS

Brain_Script
338
2019-07-12 11:12:08
<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>
.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; }
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика