Как создать кнопку для сайта онлайн: самый простой способ
Привет, друзья! Решила затронуть тему кнопок, поскольку размещаю на своем блоге довольно много статей с обзорами и рекомендациями партнерских продуктов. Но, до недавнего времени, как-то, не использовала в них эти привлекающие внимание графические элементы.
И, безусловно, зря…
А добавив кнопку в один из последних обзоров, заметила, что кликают по ней гораздо чаще, по сравнению с теми постами, где ссылка размещалась просто в тексте и выделялась жирным шрифтом.
Так что, моя копилка полезных инструментов теперь пополнилась несколькими сервисами, позволяющими создавать любые кнопки для сайта онлайн. Которыми я сегодня хочу поделиться с вами.
Поскольку в Фотошопе или др. подобном редакторе мне сделать кнопку сложнее и дольше, онлайн-конструкторы – это оптимальный вариант. С ними все быстрее и проще любому новичку.
Сам процесс работы с этими генераторами я подробно показываю в видео чуть ниже, а сейчас просто расскажу об особенностях каждого из них.
Первый и, на мой взгляд, самый удобный редактор – это dabuttonfactory.com. Вот так выглядит его интерфейс:
Важно: у данного конструктора несколько изменился интерфейс и теперь он называется ClickMinded Button Generator.
Он обладает самым нужным функционалом: позволяет редактировать текст, размеры, цвет, стиль кнопки, а на выходе загружать ее в png, jpeg, gif, ico форматах или использовать специальный CSS-код.
Помимо того, что здесь можно изготовить кнопочку полностью с нуля, сервис предлагает также несколько интересных заготовок, которые можно быстро отредактировать под себя.
Второй онлайн-конструктор — As Button Generator имеет похожие возможности редактирования, с некоторыми своими особенностями. Этот конструктор больше не работает!
Выглядит он вот так:
Например, здесь есть опция загрузки готовой картинки в качестве фона кнопки, фильтры, позволяющие настраивать разные эффекты, прозрачные переливы, полосы, тень, граница и т.
д.
Важный нюанс в работе с редактором – фильтры нужно использовать после добавления на кнопку текста или загрузки изображения. Так как, после них эти элементы уже не редактируются.
И еще один сервис – cooltext.com – интересен тем, что предлагает разные дизайнерские заготовки, в том числе с анимированными эффектами. Их можно менять слегка, либо переделывать полностью. Конструктор подходит для изготовления кнопок, надписей, логотипов.
Минус в том, что не все шрифты в нем поддерживают русский текст, и менять их не очень удобно, так как открываются они, почему-то, на новой странице без предпросмотра. Готовые кнопки скачиваются в png или gif формате, а также для них можно сгенерировать код (если зарегистрироваться).
Посмотрите небольшой обзорный урок по работе с данными сервисами и выберите подходящий для себя:
Кстати, друзья, если вы хотите сделать для своего сайта более эффектные анимированные кнопки, рекомендую посмотреть видеоурок на блоге моего коллеги Максима Зайцева.
Этот урок прекрасно дополняет мой.
Если у вас появятся какие-либо вопросы, задавайте их в комментариях. Всегда рада ответить.
Желаю успехов!
С уважением, Виктория Карпова
Поделиться в социальных сетях
20 вариантов нестандартного оформления кнопки онлайн-консультанта — Офтоп на vc.ru
Кнопка онлайн-консультанта — не обязательно скучная стандартная круглая иконка в правом нижнем углу экрана, которая отвлекает вас от изучения сайта.
6187 просмотров
У Webim много клиентов, которые разрабатывают собственный дизайн кнопок и по-разному располагают их на сайте. Вот 20 примеров и шесть советов, как оформить кнопку онлайн-консультанта.
Совет первый. Кнопка должна оптимально вписываться в дизайн сайта по форме, размеру и цветам. Можно настроить её под цвета сайта или, наоборот, сыграть на контрасте, чтобы кнопка выделялась.
TourKids — дизайн кнопки перекликается с оформлением сайта, за счёт этого она идеально вписывается в дизайн и не отвлекает внимание от информации.
Xerox — на яркую кнопку цвета логотипа с призывом начать чат сложно не обратить внимание.
888.ru разместили сразу два виджета на главной — классическую кнопку и крупный элемент на главной странице. Кнопка тёмная, не контрастирует с цветами сайта, но всё равно выделяется. Дополнительный жёлтый элемент показывает, что операторы в онлайне и готовы ответить на ваш вопрос.
Совет второй. Кнопка не должна закрывать важную информацию на сайте ни в полной, ни в мобильной версии, иначе это вызовет негатив у посетителей. При этом она должна быть достаточно крупная, чтобы пользователю не приходилось прицеливаться для клика.
На сайте сети торговых центров «Мега» есть небольшая и ненавязчивая светлая кнопка у правого края экрана. Она одинаково расположена и в основной, и мобильной версии сайта.
Небольшая кнопка с надписью Online на сайте avtodor-tr.ru показывает, что вам быстро ответят.
НПФ «Благосостояние» поместили кнопку на слайдер. Изображения меняются, кнопка остаётся на месте.
Совет третий. Перегрузка динамическими элементами тоже расстраивает посетителей сайта. Вовлечение посетителей сайта — это хорошо, но не стоит располагать рядом с кнопкой чата мигающую форму для заказа обратного звонка, кнопки социальных сетей, мессенджеров, а также добавлять всплывающие окна с предложением подписаться на push-уведомления и рассылку.
«Тинькофф Банк» спрятали в кнопку сразу три канала связи на выбор — чат на сайте, email и Telegram. У посетителя сайта есть выбор способа связи.
«Райффайзенбанк» тоже предлагает сразу четыре канала на выбор: чат, звонок с сайта, email, Telegram.
В основной версии сайта интернет-магазина La Redoute размещены три кнопки: онлайн-чат, помощь стилиста, заказ обратного звонка, и всё это в фиксированном футере. Благодаря серому цвету он не отвлекает внимание, и посетитель сайта может обратиться к консультанту в любой момент.
Аlltime.ru — ещё один вариант фиксированного футера c кнопкой консультанта, историей просмотров и корзиной.
«Газпромбанк — Управление активами» — сбоку экрана расположен выдвигающийся виджет с четырьмя элементами, среди которых кнопка онлайн-консультанта.
Совет четвёртый. Консультанты, отвечающие на обращения в чате часто сталкиваются со спамом, рекламой, попытками проверить, отвечает на сообщения живой человек или бот и так далее. Чем заметнее кнопка, тем больше внимания она привлекает, и тем больше вероятность получить подобные нецелевые обращения. На сайтах с большой посещаемостью эту проблему обычно решают тремя способами:
- кнопку делают менее заметной или переносят как пункт в меню;
- кнопку размещают не на главной (самой посещаемой странице) а, например, на странице «Помощь», куда заходят посетители с вопросом или проблемой, или «Корзина», куда доходят посетители, готовые совершить покупку;
- кнопка появляется в «авторизованной зоне» сайта — то есть пользователь увидит кнопку, только когда авторизуется.
«Банк Хоум Кредит» разместил на сайте небольшую кнопку нейтрального цвета в шапке. Она не привлечет лишнего внимания, но и найти её не трудно.
У Leroy Merlin чат есть только в «Корзине», и туда обращаются посетители сайта, готовые совершить покупку, с конкретными вопросами по доставке, наличию товаров, работе магазинов и так далее.
На сайте Почты России кнопка размещена в разделе «Помощь» после списка часто задаваемых вопросов. Только если клиент не найдёт ответ в перечне, он дойдёт до кнопки. Это сокращает количество обращений в чат.
Одна кнопка консультанта на сайте «Беларусбанка» перенесена в боковое меню, вторая — в шапку сайта.
Yves Rocher разместили ссылку в подвале сайта. Как правило, посетитель сайта прокручивает страницу до футера, чтобы найти контакты компании, поэтому ссылка на чат там оправдана.
Auto.ru использует лаконичную кнопку красного цвета, которая появляется только после того, как пользователь авторизовался на сайте.
«Столото» — пункт «Помощь» в боковом меню открывает чат с оператором. Рядом со ссылкой есть дополнительный зеленый элемент, показывающий, что операторы в онлайне.
Не совсем очевидный вариант размещения кнопки у «БКС Брокер». Сначала нужно открыть окно для регистрации на сайте, где и будет кнопка чата. Получается, что кнопку увидит посетитель сайта, готовый зарегистрироваться или авторизоваться на сайте, что отсеивает нецелевые обращения.
Совет пятый. Разместите кнопку рядом с элементом, который подталкивает посетителя сайта к покупке. Например, как это сделала компания ПЭК — на её сайте кнопка чата размещена рядом с калькулятором расчёта стоимости заказа. Тогда посетитель сайта после расчёта сможет задать уточняющий вопрос или сразу сделать заказ. Кроме того, это отличный способ приучать посетителей сайта к самообслуживанию.
Совет шестой. Настройте вид кнопки на случай, если у вас не будет возможности ответить на обращения. Например, если в какой-то момент нет ни одного оператора в онлайне, кнопка может менять цвет на красный или серый, на ней может меняться надпись с «онлайн» на «офлайн» и так далее.
По нажатию на кнопку настройте офлайн-форму. С её помощью посетитель сайта отправит обращение вам на почту, а у вас при этом сохранятся его контакты.
Так может выглядеть офлайн-форма
Либо, если вы знаете, что предстоит наплыв обращений (например, перед праздниками, во время распродаж или запуска масштабной рекламной кампании), настройте исчезновение кнопки после определённого количества обращений в очереди.
Если посетитель сайта видит, что оператор в онлайне, но вынужден долго ждать в очереди — это вызовет негатив. Кнопка снова появится, когда операторы закроют обращения в очереди. Такая функция пока есть в том числе и у сервиса Webim.
Кнопка онлайн-консультанта может располагаться в разных локациях сайта:
- справа внизу;
- справа или слева у края;
- в выдвигающемся элементе слева или справа у края;
- наверху страницы;
- как элемент или ссылка в меню;
- на слайдере;
- как крупный элемент в основной части сайта.
Оранжевым показаны варианты расположения кнопки онлайн-консультанта
Несколько советов по оформлению и расположению кнопки.
- Кнопка онлайн-консультанта должна оптимально вписываться в дизайн вашего сайта по форме, размеру и цветам.
- Не стоит располагать рядом с кнопкой чата другие динамические элементы.
- Чтобы избежать наплыва нецелевых обращений, воспользуйтесь одним из этих вариантов: сделайте кнопку менее заметной, не размещайте кнопку на главной странице, разместите кнопку в авторизованной зоне сайта.
- Разместите кнопку рядом с элементом, который подталкивает посетителя сайта к покупке.
- Настроить показ (или не показ) кнопки, если операторов нет онлайн или они перегружены.
10 лучших веб-сайтов для создания кнопок онлайн
Содержание
Вы разработчик и ищете отличный онлайн-инструмент для создания кнопок? Если да, то у меня есть большой список для вас. Ниже вы найдете мою коллекцию из 10 лучших онлайн-создателей кнопок. Кнопки являются важной частью интерфейса нашего веб-сайта, и эти инструменты помогут вам создать блестящие кнопки.
Прочитайте каждую запись и тщательно попробуйте. Посмотрите, какие из них могут облегчить вашу работу. Вы можете поделиться, если знаете другие полезные генераторы кнопок, которые могут понравиться нашим читателям/зрителям. Хотите первым узнавать о последних событиях на SmashingApps.com? Просто подпишитесь на нашу rss-ленту и следите за нами в Twitter.
Совет: если вы ищете визуальный конструктор тем для WordPress, конструктор тем Divi будет правильным выбором, чтобы завершить поиск и начать поиск для вашего следующего проекта. Divi — это больше, чем просто тема, это платформа для создания веб-сайтов, которая позволяет создавать красивые веб-сайты, даже не затрагивая ни одной строки кода и не устанавливая и не настраивая десятки разрозненных плагинов.
Мы думаем, что это будущее WYSIWYG, и это не похоже ни на одну тему WordPress, которую вы использовали раньше.
1. Button Maker
Button Maker — замечательный бесплатный инструмент для создания CSS-кодов для ваших кнопок. У вас есть доступ к разным цветам для разных частей кнопки. Ползунки в верхней части выбора цвета позволяют изменять размер и форму кнопки, которую вы видите слева. Чтобы получить код, нажмите на кнопку. Нажмите здесь, чтобы перейти на сайт Button Maker.
2. Фабрика пуговиц Da
Фабрика пуговиц Da предлагает вам отличные инструменты для создания пуговиц. Вы можете изменить размер кнопки, тень текста, стиль, цвета и тип вывода (PNG / JPEG / GIF / ICO). Изменения, которые вы вносите в кнопку, обновляются по мере вашей работы. Когда закончите, вы можете нажать на кнопку, чтобы загрузить его. Посетите фабрику Da Button, нажав здесь.
3. Buttonator
Еще один замечательный онлайн-инструмент для создания кнопок, Buttonator удовлетворит большинство ваших потребностей в кнопках.
Вы можете начать с выбора определенного стиля кнопки на правой панели. Затем вы можете приступить к внесению изменений в кнопку; изменения включают изменение цвета и стиля/размера шрифта. Кнопки можно скачать в формате GIF. Нажмите здесь, чтобы посетить Buttonator.
4. Генератор бесплатных флеш-кнопок
Если вы ищете источник для создания флеш-кнопок, то бесплатный генератор флеш-кнопок прекрасно справится с этой задачей. Вы начинаете с выбора стиля кнопки. Цвета можно изменить с помощью шестнадцатеричных значений. Нижняя панель позволяет добавлять ссылки на кнопку и названия ссылок. Щелчок по последней кнопке генерирует вашу кнопку и соответствующий HTML-код. Нажмите здесь, чтобы посетить бесплатный генератор кнопок Flash.
5. Cool RGB
Cool RGB — замечательный веб-сайт для создания многочисленных частей веб-страницы. Вы можете создавать логотипы, баннеры, панели и, конечно же, кнопки. Интерфейс создания кнопок имеет множество параметров настройки, от выбора шрифта и цвета до прозрачности и линейного градиента.
Нажмите здесь, чтобы посетить Cool RGB.
6. Как генератор кнопок
С помощью генератора кнопок вы можете создавать кнопки, редактируя их через интерфейс с вкладками. Варианты настройки охватывают много возможностей и удовлетворят все ваши требования к созданию кнопок. Результат можно скачать в виде файла изображения PNG. Нажмите здесь, чтобы перейти к генератору кнопок.
7. Генератор кнопок со скругленными углами HTML и CSS
Этот сайт предназначен для разработчиков, которые ищут очень простой онлайн-инструмент для создания кнопок 2-в-1. С помощью Генератора кнопок со скругленными углами HTML и CSS вы можете создавать кнопки, но изменяя их цвета и получая ZIP-архив, который содержит PNG-файл изображения кнопки, а также код HTML и CSS. Посетите сайт здесь.
8. Значок ленты новостей
Если вам нужен инструмент для создания простой иконки ленты новостей для вашего сайта, то значок ленты новостей отлично справится с этой задачей.
Все, что вам нужно сделать, это ввести URL-адрес вашего веб-сайта, а затем выбрать один из 3 сгенерированных HTML-кодов. Три кода имеют одинаковую форму значка, но разный размер. Посетите значок ленты здесь.
9. Создатель кнопок Адама Калси
Этот инструмент для создания кнопок Адама Калси имеет простой интерфейс. Вы можете разделить значок полосой и выбрать расстояние в пикселях между полосой и краем кнопки. Посетите мастерскую Адама Калси по созданию пуговиц здесь.
10. Button Maker
Этот инструмент очень похож на инструмент Адама Калси с заметной разницей, что вы можете выбрать положение разделительной полосы «слева», «по центру» или «справа». Вы также можете выбрать размер кнопки из двух доступных размеров. Посетите производителя пуговиц, нажав здесь.
Кнопки, значки, инструменты, веб-приложения
Создайте свой собственный логотип кнопки
Зачем использовать значок кнопки в своем логотипе?
Значок кнопки является популярным выбором для логотипов, поскольку он может быть очень универсальным и легко узнаваемым.
Кнопки часто используются для представления действий, таких как «добавить в корзину» или «скачать», что делает их идеальными для предприятий электронной коммерции или технологических отраслей. Кроме того, значок кнопки можно настроить в соответствии с цветовой схемой или стилем любой компании.
Какие цвета следует использовать?
При выборе цветов для логотипа кнопки важно учитывать как значение цветов, так и то, как они будут выглядеть при совместном использовании. Например, красный часто ассоциируется с энергией и волнением, а синий – со спокойствием и безмятежностью. Если вы разрабатываете логотип для энергичной компании, такой как спортивная команда или компания по производству детских игрушек, красный цвет может быть хорошим выбором. Однако, если вы разрабатываете логотип для более сдержанной компании, такой как финансовое учреждение или юридическая фирма, синий может быть лучшим вариантом.
Какие шрифты следует использовать?
Как и цвета, шрифты также могут передавать различные значения.
Например, шрифты с засечками часто считаются традиционными и формальными, тогда как шрифты без засечек обычно считаются более современными и повседневными. Если вы не уверены, какой шрифт использовать, попробуйте поэкспериментировать с несколькими вариантами, пока не найдете тот, который подходит вашей компании.
Какой макет лучше всего подходит для логотипа?
Лучший макет вашего логотипа будет зависеть от общего вида, который вы хотите получить. Если вы хотите, чтобы ваш логотип был простым и понятным, лучшим вариантом может быть простой значок или словесный знак. Однако, если вы хотите, чтобы ваш логотип был более подробным и сложным, вы можете рассмотреть возможность добавления дополнительных элементов, таких как формы или узоры.
Что делает логотип запоминающимся?
Есть несколько вещей, которые могут сделать логотип более запоминающимся, например, использование уникальных цветов или шрифтов, создание остроумного каламбура или добавление элемента, отражающего миссию или ценности вашей компании.
Если у вас возникли проблемы с поиском идей, попробуйте поискать вдохновение в других логотипах в вашей отрасли.
Где я могу использовать свой логотип?
Ваш логотип может быть использован на вашем веб-сайте, визитных карточках, фирменных бланках и других маркетинговых материалах. Кроме того, вы можете загрузить его на сайты социальных сетей, таких как Facebook и Twitter, чтобы повысить узнаваемость бренда.
Какие файлы я получу?
Когда вы загрузите свой логотип с GraphicSprings, вы получите ZIP-файл, который включает файлы JPG и PNG с высоким разрешением, а также векторный файл EPS. Эти файлы можно использовать как для печати, так и для веб-приложений.
Могу ли я использовать логотип в печати и в Интернете?
Да! Файлы, которые вы загружаете с GraphicSprings, можно использовать как для печати, так и для веб-приложений.
Могут ли ваши дизайнеры настроить мой логотип?
Да, наша команда дизайнеров может настроить ваш логотип в соответствии с вашими конкретными потребностями.
Просто нажмите кнопку «Настроить» на странице логотипа и сообщите нам свои требования. Мы начнем работу над вашим проектом прямо сейчас!
Могу я просто поискать варианты логотипа?
Да! Если вы не уверены, что ищете, вы можете просмотреть нашу галерею дизайнов логотипов, чтобы получить вдохновение. Просто нажмите кнопку «Обзор дизайнов» на главной странице и используйте фильтры поиска, чтобы сузить результаты поиска.
Могу ли я сразу загрузить свой логотип?
Да! Найдя понравившийся логотип, просто нажмите кнопку «Загрузить» и выберите нужный формат файла. Ваш логотип будет загружен мгновенно.
Могу ли я использовать ваш редактор без опыта работы с дизайном?
Да! Наш конструктор логотипов прост в использовании, даже если у вас нет опыта в дизайне. Просто введите название своей компании и выберите отрасль, а затем просмотрите нашу библиотеку значков и шрифтов, чтобы найти идеальное сочетание для вашего бренда.
Как работает ваш конструктор логотипов?
Наш конструктор логотипов прост в использовании, и вам потребуется всего несколько минут, чтобы создать профессионально выглядящий логотип.