Как создать кнопку для сайта онлайн: используем простой и удобный генератор

13.06.2014 Для вашего блога   8 комментариев

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

И, безусловно, зря…

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

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

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

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

Первый и, на мой взгляд, самый удобный редактор – это dabuttonfactory.com. Вот так выглядит его интерфейс:

как создать кнопку онлайн

Он обладает самым нужным функционалом: позволяет редактировать текст, размеры, цвет, стиль кнопки, а на выходе загружать ее в png, jpeg, gif, ico форматах или использовать специальный CSS-код.

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

Второй онлайн-конструктор – As Button Generator имеет похожие возможности редактирования, с некоторыми своими особенностями. Выглядит он вот так:

сгенерировать кнопку онлайн

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

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

И еще один сервис – cooltext.com – интересен тем, что предлагает разные дизайнерские заготовки, в том числе с анимированными эффектами. Их можно менять слегка, либо переделывать полностью. Конструктор подходит для изготовления кнопок, надписей, логотипов.

конструктор кнопок и логотипов онлайн

Минус в том, что не все шрифты в нем поддерживают русский текст, и менять их не очень удобно, так как открываются они, почему-то, на новой странице без предпросмотра. Готовые кнопки скачиваются в png или gif формате, а также для них можно сгенерировать код (если зарегистрироваться).

Посмотрите небольшой обзорный урок по работе с данными сервисами и выберите подходящий для себя:

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

Если у вас появятся какие-либо вопросы, задавайте их в комментариях. Всегда рада ответить.

Желаю успехов!

С уважением, Виктория Карпова

logo

Комментарии к Как создать кнопку для сайта онлайн: используем простой и удобный генератор (8)

  • Светлана:

    Спасибо!!!!!!!!

  • viktoria_ka:

    Не за что, Светлана:) Рада, если пригодилосьhttps://o-zarabotkeonline.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

  • Олия:

    Виктория, я с удовольствием давно пользуюсь сервисом cooltext.com , а о других узнала из вашей статьи.Спасибо.

    • viktoria_ka:

      Да не за что:) Спасибо, что заглянули. Мне понравился Ваш сайт, с удовольствием буду ходить к Вам в гости и всегда рада видеть у себя:)

  • Лариса:

    Виктория, благодарю! Сегодня создала на сайте кнопку подписки под каждую статью. :yahoo: Правда, с кодом немного пришлось повозиться для того чтобы она отображалась сразу на всех страницах и по центру. Ну ничего, справилась :yes:

    • Виктория Карпова:

      Лариса, здорово, что все получилось:)

  • Виктор:

    Спасибо за статью.
    А подскажите как вставить на сайт готовую анимированную кнопку, которую я изготовил Cooltext.
    вставляю или кнопка работает или переходит. а слить две опции в одну не получается.
    Работаю на WP Metro тема

    • Виктория Карпова:

      Ну если для сайта Вордпресс – то сохраняете свою кнопку, как гиф-картинку, вставляете ее в свой текст, выделяете эту картинку и делаете ее ссылкой – в итоге кликнут на вашу кнопку и перейдут по указанной в ней ссылке.

Оставить ответ

Вы можете использовать эти HTML теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

:bye: 
:good: 
:negative: 
:scratch: 
:wacko: 
:yahoo: 
B-) 
:heart: 
:rose: 
:-) 
:whistle: 
:yes: 
:cry: 
:mail: 
:-( 
:unsure: 
;-)