Сегодня мы делимся плавающими иконками социальных сетей с эффектом наведения. Вы можете назвать это чистыми кнопками обмена CSS с эффектом наведения. В основном кнопки расширяются или появляются при наведении курсора мыши, в противном случае видна только одна кнопка.
Прежде чем делиться исходным кодом, давайте поговорим об этом. Мы использовали только HTML и CSS для его создания. А для иконок мы использовали библиотеку иконок с потрясающими шрифтами. Сначала мы создали основной div с помощью class = "soc-ufive", а затем мы поместили шесть иконок внутри гиперссылок.
Затем мы поместили разные задержки перехода для каждой иконки. По сути, мы выбрали порядок от последнего к первому и выставил задержку с увеличением на 20 мс. Кроме того, мы использовали свойство всплывающей подсказки CSS, в котором отображается информация об объекте при наведении. Мы поместили текст подсказки, в соответствии с кнопками.
Для создания виджетов кнопок социальных сетей вам нужно создать только два файла. Один для HTML, а другой для CSS.
Ссылка на установку, демо и код - источник
