Кнопки соц.сетей с эффектом на CSS
 | |
| В этом материале подробно разберем эффект на плавающие иконки, которые предназначены для социальных сетей, где только используем HTML и CSS. Вообще вашему вниманию CSS плавающие иконки социальных медиа, где по умолчанию идет одна кнопка при открытии страницы или при воде на сайт. Но только стоит навести на ее клик, как вертикально выстраиваются все кнопки, что можно задействовать не только под социальные закладки, но аналогично подойдут под разные функций на кнопки общего доступа. Ведь сам плюс заключается в том, что изначально эта функция мало место занимает, и только когда нужно ее задействовать, то можно ее раскрыть на какое-то время, ведь только клику убираем, как автоматически все складывается в одну кнопку. Доступно множество типов кнопок обмена, но большинство людей используют несколько типов, которые для пользователя более понятны. Некоторые люди используют фиксированные кнопки до или после содержимого, а некоторые используют плавающие кнопки типа виджетов. Есть много социальных служб и плагинов, которыми вы можете легко пользоваться. Здесь симпатичные кнопки обмена на основе пользовательского интерфейса, а с тенью это выглядит как материальный дизайн, что можно на стилистике добавить или убрать. По умолчанию с открытием страницы:  При наведение курсора:  HTML А также добавьте дополнительный класс для придания разного цвета каждому значку, где внизу слева, используя bottom: 5%;& left: 0;свойства значения. Вы можете настроить его, как вы хотите, а это изменив значения в CSS. Также присутствует задержка анимации, а другие свойства ожидают последние кнопки, которые являются основным значком общего ресурса. Код <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 Где идут разные задержки перехода для каждой иконки, где по сути выбран порядок от последнего к первому и выставил задержку с увеличением на 18 мс. Кроме того используется 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; } Лучшая вещь при использовании этих кнопок, вы можете легко настроить, вот потому что это легко настроить или редактировать. Если вы используете какой-либо онлайн-сервис, тогда файл будет тяжелым, а загрузка сайта займет много времени. Это очень легкий файл с несколькими строками кодов, а также с иконками. Что если все выстроить автоматически, то не будет зависеть от сервиса, а значит не каких загрузок на страницы сайта. Где в заключение можно добавить, что эти кнопки CSS Social Share с дизайном материала и эффектом наведения. Которые идут на чистом HTML CSS, где присутствует эффект появление, но, а также отлично редактируется под любую стилистику. Вы можете назвать это чистыми кнопками обмена CSS с эффектом наведения, где в основном кнопки расширяются или появляются при наведении курсора мыши, то в противном случае видна только одна кнопка. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
