Конструктор кнопок для сайта: Онлайн генератор кнопок для сайта

Реклама

Что такое кнопка?

Кнопка (англ. button) — элемент интерфейса, является метафорой кнопки в технике и, соответственно, изображается схожей с ней и выполняет аналогичные функции. При нажатии на неё происходит программно связанное с этим нажатием действие либо событие.

Основной особенностью является простота настроек кнопок и удобство в редактировании.

При создание данного инструмента, я максимально старался упростить систему настройки кнопки. Для тех, кто не разберётся, что нужно делать объяснения:

1. Текст кнопки — введите текст, который будет отображаться на кнопке.
2. Ссылка кнопки — укажите страницу, которая будет открываться при нажатии.
3. Цвета кнопки — блок настройки цветов. Тут вы сможете настроить цвета кнопки, текста и обводки.
4. Настройка размеров — данный блок необходим для настройки размеров кнопки и размеров шрифта.
5. Выравнивание кнопки — тут вы сможете выравнять кнопку по разным сторонам сайта.
6. Открытие на новой вкладке — добавить возможность открывать по клику новую страницу.
7. Цвет при наведение — настройка позволяет сделать эффект при наведении мыши на кнопку.
8. Цвет текста при наведение — позволяет изменить цвет текста при наведении.

После выполнения всех необходимых настроек, нажмите на кнопку «Выделить код» и нажмите комбинацию клавиш CTRL+C на клавиатуре, для копирования кода. Затем установите полученный код в нужное вам место.

Da Button Factory — Бесплатный генератор кнопок CTA

Что случилось со старой «Da Button Factory»?

Фабрика Da Button была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопок с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые изучают, как написать сообщение в блоге, которое конвертирует.

Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari, чтобы использовать этот инструмент. Вы можете столкнуться с проблемами при использовании Internet Explorer — если это так, просто загрузите один из рекомендуемых браузеров.

Как добавить кнопку на веб-сайт, в электронную почту или сообщение в социальной сети

Это можно сделать несколькими способами.

Вариант №1: Загрузите файл изображения кнопки

Это самый простой способ. Просто выберите предпочитаемый тип файла и нажмите кнопку загрузки.

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

Вариант №2: реализовать кнопку как HTML + CSS

Da Button Factory также является бесплатным генератором кнопок CSS. Этот вариант требует немного большего знания HTML и CSS, но это приведет к более быстрой веб-странице или электронной почте (поскольку нет необходимости загружать изображение).

Для этого создайте HTML-элемент, например «div» или «button», напишите копию CTA и назначьте ему класс. В этом примере мы назовем класс «my-cta-button».

Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу, используя теги «стиль».

Всё! Теперь вы разработали и внедрили собственную HTML-кнопку.

Как создавать призывы к действию с высокой конверсией

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

1. Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и ее фоном, а также между кнопкой и фоном страницы достаточно контраста.
2. Сообщите своим пользователям, что именно они получат, нажав на CTA. Вместо того, чтобы использовать что-то общее, например «Нажмите здесь», используйте описательный текст, например «Купить сейчас» или «Скачать».
3. Используйте первое лицо при написании вашего CTA-копии. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
4. Старайтесь, чтобы текст призыва к действию был коротким и по существу. Избегайте создания излишне многословных CTA.
5. Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Скачать СЕЙЧАС», «Получить электронную книгу БЕСПЛАТНО» или «Сэкономьте 10 $».

Ваша очередь

Da Button Factory от ClickMinded — это онлайн-производитель кнопок, который позволяет быстро и бесплатно создавать красивые кнопки CTA с высокой конверсией для веб-сайтов, рассылок по электронной почте или сообщений в социальных сетях.

Начните с показанной выше модели, настройте стиль в соответствии со своими потребностями и внедрите созданные вами кнопки для развития вашего бизнеса или веб-сайта.

После того, как вы создали свои кнопки и готовы начать свою первую кампанию цифрового маркетинга, обязательно ознакомьтесь с библиотекой шаблонов цифрового маркетинга ClickMinded, которая включает в себя полезные шаблоны для всего: от написания описаний на Youtube до запуска рекламы в Google. .

Удвойте коэффициент конверсии вашего веб-сайта

Получите руководство по идеальной целевой странице, отправленное на ваш почтовый ящик.

[Бесплатный мини-курс] 10 эффективных тактик нижней воронки для развития вашего бизнеса

Откройте для себя 10 проверенных тактик получения дохода (используемых стартапами, агентствами и предприятиями всех размеров).

Узнайте, как использовать тактику роста от наставника Techstars, чтобы улучшить свою воронку продаж

Забронируйте место на этом специальном бесплатном мастер-классе по воронкам конверсии!

Значительно увеличьте доход с помощью мощных воронок продаж.

Курс по воронке продаж ClickMinded научит вас точной тактике высокой конверсии, которую вы можете использовать, чтобы максимально быстро увеличить доход.

Значительно развивайте любой бизнес с помощью СОП по цифровому маркетингу.

Библиотека ClickMinded SOP представляет собой набор шаблонов стратегии цифрового маркетинга с пошаговыми инструкциями, которые можно использовать для развития любого веб-сайта.

Спасибо, что являетесь частью семьи ClickMinded!

Генератор кнопок

Основы

Название кнопки

Открыть в новом окне

Использование REL = «NOFOLLY»

URL загрузка

Это скажет браузер для загрузки

.

Шрифт

[Сайт по умолчанию]ArialCourier NewGeorgiaTahomaTimes New RomanTrebuchet MSVerdana

px

Padding

Цвет текста

Цвет текста Hover

Ширина кнопки0005

пикселей

Высота кнопки

пикселей

Ширина и высота не являются обязательными. Если установлено значение 0, размер кнопки будет определяться размером текста плюс отступ

Единица ширины

пикселей

%

Единица высоты

пикселей

%

Использование процентов делает размер кнопки равным элементу страницы. Предварительный просмотр в реальном времени может быть ненадежным

Описание

Граница

Радиус

Верхний левый

Верхний правый

Style

dasheddotteddoublegrooveinsetoutsetridgesolid

Default:

Width

px

Border Color

Hover

Shadow Offset Left

Shadow Offset Top

Shadow Blur

Shadow Spread

Border Shadow Color

Наведение

Фон

Использовать градиенты

Начало

Конец

Цвет фона

Фоновое отверстие

Нормальная непрозрачность

По умолчанию:

Hover Opacity

По умолчанию:

Стоп

По умолчанию:

Текст Shadow

Shadow Offset Last

Shadow Offset Top Oppset Top

Shadow Blur 9007 9007 9005 9007.

Наведение

Контейнер

Использование контейнера

Создает контейнер вокруг кнопки, которая перемещает другой контент

Центрирует контейнер

Ширина

PX

Ширинный блок

PX

%

MARGE

Выравнивание

Дисплей: inline-blockfloat: левый флот: правый

Float может помочь выравнивать кнопку и другое содержание на той же линии

.

Если для этой кнопки включен параметр «Использовать внешний CSS», скопируйте и вставьте приведенный ниже код CSS в таблицу стилей вашей темы.

Сначала сохраните кнопку

Advanced

Добавление !important к стилям кнопок может помочь избежать потенциальных конфликтов со стилями вашей темы.