5 дизайнов модуля кнопок Creative Divi и как их сделать

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

Давайте копаться!

Sneak Peek

Вот краткий обзор кнопок, которые мы создадим в этом уроке.

1. Кнопка со стрелкой влево

2. Кнопка "Перемещение линии"

3. Кнопка "Потяните вкладку"

4. Кнопка с логотипом в виде круга

5. Кнопка свечения

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

5 дизайнов модуля кнопок Divi и как их сделать

1. Кнопка со стрелкой влево

Для начала создайте новый раздел со строкой из одного столбца и добавьте модуль кнопки в строку.

Затем измените текст содержимого кнопки по умолчанию, чтобы читать «Начать работу» (или что вы хотите на самом деле).

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

Использовать собственные стили для кнопки: ДА
Цвет текста кнопки: #ffffff
Цвет фона кнопки: # 324376
Ширина границы: 0 пикселей
Расстояние между буквами кнопки: 0,2 м
Шрифт кнопки: Fira Sans
Стиль шрифта: TT (верхний регистр), U (подчеркнутый)
Цвет подчеркивания: rgba (255,255,255,0.2)
Стиль подчеркивания: двойной
Значок кнопки: см. Снимок экрана
Цвет значка кнопки: # ff4751
Расположение значка кнопки: слева

Пользовательские отступы: 40 пикселей слева, 20 пикселей справа

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: 22 пикселя
Вертикальное положение тени блока: 0 пикселей
Цвет тени: # ff4751

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

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

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

2. Кнопка "Перемещение линии"

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

Для начала создайте новый раздел со строкой из одного столбца и добавьте в строку модуль кнопок.

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

• Использовать собственные стили для кнопки: ДА
• Цвет текста кнопки: # 3b7986
• Градиент фона кнопки слева Цвет: rgba (255,255,255,0)
• Цвет градиента фона кнопки справа: # 3b7986
• Направление градиента: 180 градусов
• Стартовая позиция: 96%
• Конечная позиция: 0%
• Ширина границы кнопки: 10 пикселей
• Цвет границы кнопки: rgba (0,0,0,0)
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 6 пикселей
• Шрифт кнопки: Exo 2
• Толщина шрифта: полужирный
• Стиль шрифта: TT (маленькие заглавные буквы)
• Значок кнопки: стрелка вправо (см. Снимок экрана)
• Показывать только значок при наведении курсора на кнопку: НЕТ
• Пользовательский отступ: 0 пикселей снизу
• Box Shadow: см. Снимок экрана
• Горизонтальное положение тени блока: -15 пикселей
• Вертикальное положение прямоугольной тени: 15 пикселей
• Сила распространения тени коробки: -13 пикселей
• Цвет тени: # 3b7986

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

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

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

Чтобы добавить эффект наведения, который перемещает тень блока, вернитесь к настройкам дизайна и наведите указатель мыши на параметр «Горизонтальное положение тени блока». Вы увидите всплывающее окно со стрелкой рядом с текстом. Нажмите на него, чтобы открыть параметры наведения для этого конкретного параметра.

Затем щелкните вкладку при наведении курсора и измените значение на 13 пикселей.
Вы увидите предварительный просмотр эффекта наведения в визуальном построителе.

Вот как выглядит эффект наведения:

3. Кнопка "Потяните вкладку"

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

Чтобы создать кнопку, сначала создайте новый раздел со строкой из одного столбца, а затем добавьте модуль кнопки в строку.

Откройте настройки модуля кнопок и обновите текст кнопки под вкладкой содержимого так, как хотите (я собираюсь использовать текст «Узнать больше»).

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

Использовать собственные стили для кнопки: ДА
Цвет текста кнопки: #ffffff
Цвет фона градиента кнопки слева: # 7D80DA
Правый градиент фона кнопки: # 8EEDF7
Направление градиента: 90 градусов
Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 10 пикселей
Расстояние между буквами кнопки: 1 пиксель
Шрифт кнопки: Source Sans Pro
Толщина шрифта: полужирный
Стиль шрифта: TT
Значок кнопки: см. Снимок экрана
Цвет значка кнопки: #ffffff
Пользовательские отступы: 1 мкм влево, 2,5 мкм вправо
Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -35 пикселей
Вертикальное положение тени блока: 0 пикселей
Цвет тени: # 7d80da

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

Перейдите на вкладку Дополнительно и введите следующий CSS в поле ввода После:

position: absolute;
right: 5%;

Этот CSS нацелен на расположение значка и дает ему абсолютную позицию в 5% от правого края кнопки.

Ознакомьтесь с дизайном на данный момент.

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

Пользовательское заполнение: 4em справа

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

4. Кнопка с логотипом в виде круга

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

Для начала создайте новый раздел со строкой из одного столбца и добавьте модуль кнопки в строку.

Затем откройте настройки дизайна кнопок. На вкладке содержимого добавьте слово «Go» для текста кнопки.

Затем перейдите в настройки дизайна и выберите использование пользовательских стилей кнопок. Сначала добавьте изображение круга в качестве фонового изображения для кнопки. Чтобы этот дизайн работал, убедитесь, что вы используете изображение в формате PNG с логотипом или значком, которое представляет собой идеальный круг и что размеры изображения имеют одинаковую высоту и ширину. Я использую изображение png размером 118 на 118 пикселей. Берите здесь, если хотите:

После добавления фонового изображения убедитесь, что для размера фонового изображения установлено значение «Фактический размер». Это позволит сохранить исходные размеры изображения (118 на 118 пикселей).

Затем мы хотим, чтобы размер нашей кнопки был точным размером нашего изображения круга. Для этого перейдите на вкладку Advanced и введите следующий настраиваемый CSS в основной элемент:

width: 118px;
height: 118px;
line-height: 118px !important;
text-align: center;

Обратите внимание, что CSS устанавливает для ширины, высоты и высоты строки одно и то же значение - 118 пикселей. Это та же ширина и высота нашего изображения. Теперь изображение отлично помещается в кнопке. Line-height установлен на 118 пикселей, так что текст внутри кнопки будет вертикально центрирован внутри кнопки (он еще не полностью отцентрован, потому что все еще есть некоторые отступы, от которых нам нужно избавиться, которые отбрасывают его). А text-align: center гарантирует, что текст внутри кнопки остается по центру, даже если модуль кнопки выровнен по левому или правому краю.

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

Цвет текста кнопки (по умолчанию): rgba (0,0,0,0)
Цвет текста кнопки (при наведении): #ffffff

(Это скрывает текст кнопки по умолчанию и показывает его белым при наведении)

Цвет фона (по умолчанию): # 121212
Цвет фона (при наведении): # da00f2

(По умолчанию за изображением отображается черный фон, а при наведении курсора - ярко-розовый цвет фона.)

Ширина границы кнопки: 0 пикселей
Радиус кнопки: 50%;

(Установка радиуса кнопки на 50% превратит кнопку в форму круга, потому что высота и ширина кнопки были установлены на 118 пикселей в настраиваемом CSS.)

Шрифт кнопки: Поппинс
Толщина шрифта: полужирный
Стиль шрифта: TT
Показать значок кнопки: НЕТ (при наличии значка кнопки центрированный текст не отображается)
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

(Важно убрать верхнее и нижнее отступы, чтобы высота строки, которую мы установили в настраиваемом CSS, делала текст вертикально центрированным.)

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Цвет тени (по умолчанию): rgba (0,0,0,0)
Цвет тени (при наведении): rgba (0,0,0,0.68)

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

Вот окончательный дизайн с эффектом наведения.

5. Кнопка свечения

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

Для начала создайте новый раздел со строкой из одного столбца и добавьте в строку модуль кнопки. Перед обновлением модуля кнопок откройте настройки раздела и задайте разделу темный цвет фона (# 333333).

Теперь откройте настройки кнопки.

Вы можете оставить текст кнопки по умолчанию «Щелкните здесь». Затем обновите следующие настройки дизайна:

Расположение кнопок: по центру
Использовать собственные стили для кнопки: ДА
Размер текста кнопки: 18 пикселей
Цвет текста кнопки: #ffffff

Цвет фона градиента кнопки слева: # 00ff8c
Цвет градиента фона кнопки справа: # 15c39a
Тип градиента: радиальный
Радиальное направление: центр
Конечная позиция: 75%

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

Ширина границы кнопки: 0 пикселей
Радиус границы кнопки: 100 пикселей
Расстояние между буквами кнопки (по умолчанию): 4 пикселя
Расстояние между буквами кнопки (при наведении): 5 пикселей

(Увеличение расстояния между буквами при наведении курсора немного расширит всю кнопку для приятного эффекта)

Плотность шрифта: Ультра полужирный
Стиль шрифта: I, TT
Значок кнопки: стрелка вправо (см. Снимок экрана)
Пользовательские отступы: 20 пикселей сверху, 20 пикселей снизу, 30 пикселей слева, 50 пикселей справа

(вам нужно больше правого отступа, чтобы учесть значок кнопки со стрелкой вправо)

Box Shadow: см. Снимок экрана
Вертикальное положение тени блока: 0 пикселей
Box Shadow Blur Strength (по умолчанию): 64px
Сила размытия тени коробки (при наведении): 100 пикселей
Сила распространения тени коробки: -12 пикселей
Цвет тени: rgba (0,255,140,0.66)

(Тень блока добавляет к эффекту свечения, если вы сопоставите цвет тени с цветом кнопки. Увеличение силы размытия при наведении также увеличит свечение кнопки)

Оцените окончательный дизайн с эффектом наведения.

Больше вдохновения для кнопок

Чтобы узнать больше о стилях кнопок, ознакомьтесь с некоторыми из этих статей:

• Как создать кнопку со значком шрифта с помощью Divi
• Создайте уникальный полноэкранный макет Divi с помощью анимированной кнопки прокрутки
• Как стилизовать социальные кнопки Monarch в соответствии с дизайном вашего сайта
• 7 ключей к созданию неотразимой кнопки подписки

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

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

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

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