Как создать уникальные эффекты при наведении курсора на кнопку подписки в социальных сетях с помощью Divi

Модуль Divi Social Media Follow позволяет вам легко стилизовать и добавлять эти важные ссылки в ваши социальные сети в любом месте вашего веб-сайта. И если вы хотите запачкать руки некоторыми мощными встроенными эффектами наведения Divi, вы также можете разработать некоторые творческие эффекты наведения для кнопок подписки в социальных сетях.

В этом уроке я собираюсь показать вам некоторые уникальные эффекты при наведении курсора на кнопку подписки в социальных сетях, которые могут вас удивить.

Проверьте это!

Sneak Peek

Вот краткий обзор создаваемых нами эффектов наведения.

Часть 1: Перемещение теней прямоугольников для выделения кнопок подписки в социальных сетях

Границы в точки

Точки к границам

Прыгающие тени 1

Прыгающие тени 2

Начать создание эффектов при наведении, часть 1

Часть 2: изменение цвета, размера и формы при наведении курсора

Изменение размера и цвета

Изменение размера, цвета и формы

Начать создание эффектов наведения, часть 2

Часть 3: Эффекты фильтра

Начать создание эффекта наведения, часть 3

Часть 4: Большие значки с эффектами смешивания экрана и фильтров

Начать создание, часть 4, эффект наведения

Начиная

Подпишитесь на наш канал Youtube

Чтобы начать работу с этим уроком, все, что вам действительно нужно, это установленная и активная тема Divi. Затем создайте новую страницу и дайте ей название. Затем нажмите, чтобы использовать Divi Builder, и выберите вариант «Использовать готовый макет». В модальном всплывающем окне «Загрузить из библиотеки» выберите пакет макетов разработчика приложений. Затем нажмите, чтобы использовать кнопку. Чтобы быстро начать дизайн наших кнопок подписки в социальных сетях, мы собираемся использовать макет домашней страницы разработчика приложений.

Опубликуйте свою страницу и нажмите кнопку, чтобы построить во внешнем интерфейсе.

Теперь удалите все разделы страницы, кроме раздела, содержащего кнопки подписки в социальных сетях внизу страницы.

Это послужит начальным шаблоном для создания наших эффектов наведения.

Давайте сохраним этот раздел в библиотеке Divi, чтобы при необходимости можно было добавить свежую версию дизайна кнопок подписки в социальных сетях.

Вы также можете дублировать раздел на своей странице несколько раз. Это позволит вам создавать различные эффекты наведения, начиная с предварительно созданного раздела.

Теперь вы готовы приступить к созданию эффектов наведения.

Давайте начнем.

# 1 Перемещение теней прямоугольников для выделения кнопок подписки в социальных сетях

Границы в точки

Для этого эффекта наведения мы добавим тень прямоугольника вокруг кнопки, которая сжимается и парит над кнопкой при наведении. Для этого откройте модуль подписки в социальных сетях и щелкните, чтобы открыть настройки социальной сети facebook.

Затем скопируйте цвет фона, используемый для значка, в буфер обмена (# 3b5998). Этот цвет будет использован для тени блока.

Теперь откройте вкладку дизайна и обновите следующее:

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей (по умолчанию), -46 пикселей (при наведении)
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 5 пикселей (по умолчанию), -16 пикселей (при наведении)

Для цвета тени вставьте цвет фона (# 3b5998) и уменьшите непрозрачность на 50%. Это даст вам более светлый вариант цвета фона кнопки.

Цвет тени: rgba (59,89,152,0.5)

Теперь щелкните правой кнопкой мыши категорию стилей теней бокса и выберите «Копировать стили теней боксов».

Сохраните настройки социальной сети facebook, а затем щелкните правой кнопкой мыши каждую из социальных сетей и выберите «Вставить стили элементов» для каждой из них. Это применит те же стили тени блока к остальным кнопкам.

Однако вам все равно нужно будет обновить цвет тени блока, специфичный для каждого из них. Для этого повторите тот же процесс, который мы проделали для социальной сети Facebook. Откройте определенные настройки социальной сети, скопируйте используемый цвет фона, вставьте его в качестве нового цвета тени блока и затем уменьшите непрозрачность на 50%.

Вот цвета теней для каждой из оставшихся социальных сетей:

Цвет тени Twitter Box: rgba (0,172,237,0,5)
Цвет тени Instagram Box: rgba (234,44,89,0,5)
Цвет теней Dribble Box: rgba (234,76,141,0,5)
Youtube Box Shadow Color: rgba (168,36,0,0,5)

Как только цвета теней коробки обновлены, проверьте окончательный результат.

Точки к границам

Вы можете легко отменить эффект наведения, отключив значения по умолчанию и значения наведения для вертикального положения тени блока и силы распространения.

Дублируйте раздел (если вы хотите сохранить дизайн «границы в точки»), а затем откройте социальные сети, следуя настройкам модуля. Затем откройте настройки социальной сети Facebook и обновите следующее:

Вертикальное положение тени блока: -46 пикселей (по умолчанию), 0 пикселей (при наведении)
Сила распространения тени блока: -16 пикселей (по умолчанию), 5 пикселей (при наведении)

Вам нужно будет обновить эти новые настройки тени для каждой из оставшихся социальных сетей. Вы можете сделать это вручную или щелкнуть правой кнопкой мыши, чтобы скопировать вертикальное положение тени бокса и силу распространения, а затем вставить их в каждую из сетей.

После этого ваш окончательный дизайн будет выглядеть следующим образом.

Эффект прыгающих теней

Для следующей версии этого дизайна и эффекта наведения мы собираемся сделать так, чтобы тень (точка) каждой кнопки начиналась в одном и том же месте по умолчанию. Это создаст своего рода эффект подпрыгивания.

Для начала вы можете продублировать дизайн «точки к границам», который мы создали ранее. Откройте социальные сети, следуя настройкам модуля, а затем откройте настройки социальной сети facebook. Обновите следующие стили тени блока:

Горизонтальное положение тени блока: 140 пикселей (по умолчанию), 0 пикселей (при наведении)
Вертикальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)

Для социальной сети Twitter обновите следующее:

Горизонтальное положение тени блока: 70 пикселей (по умолчанию), 0 пикселей (при наведении)
Вертикальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)

Для социальной сети Instagram обновите следующее:

Горизонтальное положение тени блока: 70 пикселей (по умолчанию), 0 пикселей (при наведении)
Вертикальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)

Для социальной сети Dribble обновите следующее:

Горизонтальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)
Вертикальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)

Для социальной сети Youtube обновите следующее:

Горизонтальное положение тени блока: -140 пикселей (по умолчанию), 0 пикселей (при наведении)
Вертикальное положение тени блока: -70 пикселей (по умолчанию), 0 пикселей (при наведении)

Проверьте окончательный результат.

Если вы не хотите, чтобы точка отображалась изначально, вы можете установить цвет тени прямоугольника по умолчанию на прозрачный, а затем добавить цвет тени прямоугольника при наведении курсора. Это даст вам дизайн, который будет выглядеть следующим образом:

# 2 Изменение цвета, размера и формы при наведении курсора

В следующей серии эффектов наведения я покажу вам, как легко изменить цвет, размер и форму кнопок социальных сетей при наведении курсора. Для начала убедитесь, что вы используете свежую версию раздела с кнопками подписки в социальных сетях на макете домашней страницы разработчика приложений. Если вы сохранили его в своей библиотеке Divi, сейчас самое время добавить его на свою страницу.

Изменение цвета

Изменить цвет кнопки социальных сетей при наведении курсора довольно просто. В этом примере давайте начнем с темно-серого цвета фона по умолчанию, который превращается в цвет социальной сети.

Для этого откройте модуль «Следование в социальных сетях», а затем откройте настройки сети Facebook. Обновите следующее:

Цвет фона: # 333333 (по умолчанию), # 3b5998 (при наведении)

Затем продолжите этот процесс, чтобы обновить оставшиеся четыре цвета фона социальной сети следующим образом:

Цвет фона Twitter: # 333333 (по умолчанию), # 00aced (при наведении)
Цвет фона Instagram: # 333333 (по умолчанию), # ea2c59 (при наведении)
Цвет фона дриблинга: # 333333 (по умолчанию), # ea4c8d (при наведении)
Цвет фона Youtube: # 333333 (по умолчанию), a82400 (при наведении)

Вот результат.

Изменение размера

Чтобы изменить размер кнопки, мы можем добавить тень блока при наведении курсора. Это позволяет кнопке увеличиваться в размерах, не добавляя фактического места к кнопке, которое отталкивало бы соседние кнопки при наведении курсора.

Для этого откройте настройки сети Facebook и добавьте следующие стили тени блока:

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: 0 пикселей (по умолчанию), 10 пикселей (при наведении)
Цвет тени: # 3b5998 (он должен быть того же цвета, что и цвет фона кнопки при наведении курсора).

Чтобы ускорить процесс добавления того же дизайна тени блока к остальным кнопкам социальных сетей, щелкните правой кнопкой мыши категорию тени блока в сети Facebook и выберите «Сохранить стили тени блока».

Сохраните настройки, затем щелкните правой кнопкой мыши каждую из социальных сетей и выберите «Вставить стили элементов».

Теперь все, что вам осталось сделать, это обновить цвет тени блока, указав правильный цвет социальной сети, соответствующий цвету фона при наведении курсора.

Для этого обновите следующее:

Цвет тени Twitter Box: # 00aced
Цвет тени Instagram Box: # ea2c59
Цвет тени Dribble Box: # ea4c8d
Цвет тени Youtube Box: # a82400

Вот окончательный результат.

Изменение формы

Чтобы изменить форму кнопки при наведении, все, что вам нужно сделать, это настроить параметр «Закругленные углы». Этот модуль подписки в социальных сетях в настоящее время имеет закругленные углы, равные 40 пикселям, что делает кнопки круглыми. Если мы хотим изменить его на квадрат, все, что вам нужно сделать, это настроить закругленные углы до 0 пикселей при наведении.

Для этого откройте настройки сети Facebook и обновите следующее:

Закругленные углы (при наведении): 4 пикселя по всем четырем углам.

Затем скопируйте стили границ и вставьте их в каждую оставшуюся сеть.

Вот окончательный дизайн.

# 3 Эффекты фильтра

Для этого следующего эффекта наведения я покажу вам, как использовать пару эффектов фильтра для изменения цвета кнопок социальных сетей при наведении курсора. Для начала убедитесь, что вы используете свежую версию раздела с кнопками подписки в социальных сетях на макете домашней страницы разработчика приложений. Если вы сохранили его в своей библиотеке Divi, сейчас самое время добавить его на свою страницу.

Эффекты насыщенности и обратного фильтра при наведении курсора

Использование эффектов насыщенности и инвертирования фильтров - простой и эффективный способ изменить стиль кнопок социальных сетей при наведении курсора. В этом примере я покажу вам, как комбинировать насыщенность и инверсию для создания серых кнопок с черными значками, которые возвращаются к исходному цвету при наведении курсора.

Для этого откройте социальные сети, следуйте настройкам модуля, а затем откройте каждую из индивидуальных настроек социальной сети и обновите следующие параметры фильтра:

Насыщенность: 0% (по умолчанию), 100% (при наведении)
Инвертировать: 100% (по умолчанию), 0% (при наведении)

Посмотрите результат.

4. Большие цветные значки с эффектами наложения экрана и фильтров.

В этом окончательном дизайне кнопки социальных сетей при наведении курсора мы начнем полностью с нуля. Итак, создайте новый раздел со строкой из одного столбца и добавьте в эту строку модуль подписки в социальных сетях.

Затем откройте параметры отслеживания социальных сетей и удалите социальную сеть Twitter по умолчанию, оставив только элемент социальной сети facebook.

Затем обновите настройки социальных сетей следующим образом:

Цвет фона: #ffffff
Выравнивание элемента: по центру
Режим наложения: Экран

Затем откройте настройки элемента социальной сети Facebook и обновите следующее:

Цвет фона: # 000000
Пользовательское поле: 10 пикселей слева, 10 пикселей справа
Пользовательские отступы: 10 пикселей сверху, 10 пикселей снизу, 10 пикселей слева, 10 пикселей справа
Насыщенность: 0% (по умолчанию), 100% (при наведении)
Инвертировать: 100% (по умолчанию), 0% (при наведении)

Сохранить настройки.

Затем продублируйте элемент социальной сети facebook 4 раза, чтобы у вас было всего 5 кнопок социальных сетей.

Теперь откройте каждый из дублированных элементов социальной сети и измените цвет социальной сети и фона на # 000000.

Сохранить настройки.

Теперь, когда у нас действует режим наложения экрана, мы можем добавить цвет фона к столбцу строки, который содержит наш модуль подписки в социальных сетях. Какой бы цвет фона мы ни использовали, он будет определять цвет значков социальных сетей и цвет фона при наведении курсора.

Для этого откройте настройки строки и обновите следующее:

Цвет фона столбца 1: # 0c71c3

Обратите внимание, как цвета значков изменились на этот цвет фона.

Теперь посмотрим на результат.

Чтобы увеличить значки / кнопки, мы можем использовать фрагмент Custom CSS. Для этого мы должны сначала добавить CSS ID в модуль подписки в социальных сетях, а затем добавить CSS в настройки нашей страницы.

Откройте модуль подписки в социальных сетях и добавьте следующий идентификатор CSS на вкладке «Дополнительно».

Идентификатор CSS: большие значки

Затем откройте настройки своей страницы и добавьте следующий настраиваемый CSS.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Этот код увеличивает размер значков до 50 пикселей, а высоту и ширину кнопок до 100 пикселей. Медиа-запрос гарантирует, что этот стиль применяется только к настольному компьютеру.

Проверьте окончательный результат.

Последние мысли

Я надеюсь, что эти эффекты при наведении курсора на кнопку подписки в социальных сетях дадут вам несколько свежих идей о том, как привлечь посетителей с помощью уникального дизайна. Большинство из этих примеров легко создать, особенно если вы ознакомитесь с тем, как работают эффекты наведения в Divi. До следующего раза продолжайте оттачивать свои навыки Divi и создавать что-то прекрасное для своего следующего проекта.

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!