Построение сайта, продвижение, работа в сети

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

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

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

Онлайн-конструктор Da Button Factory

Наиболее удобным онлайн-конструктором, с помощью которого можно быстро и легко создавать красивые кнопки для ваших сайтов, является Da Button Factory по адресу dabuttonfactory.com. Сервис англоязычный, но в нем все довольно просто. Можно работать и в переводе Google Chrome.

Редактирование текста кнопки

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

Редактирование кнопки

Затем можно сохранить кнопку в определенном формате: png, gif, jpeg или ico и т. д.

Работать с сервисом очень легко. При вводе текста сразу идет отображение.

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

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

Справа выбираем форму кнопки – либо с закругленными краями, либо с прямыми углами.

Цвет кнопки может быть либо один, либо иметь градиент, либо два независимых цвета и т. д.

Есть функция Bubble effect, при выборе которой появляется на кнопке прозрачный переход.

Можно отредактировать границы кнопки. Размер кнопки можно выбрать фиксированный, либо настраиваемый по горизонтали и вертикали.

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

Далее копируем url кнопки, либо можно скачать ее себе на компьютер в нужном для вас формате. Если выбрать CSS фон, тогда предложат скопировать CSS-код кнопки.

Кнопку сохраняем – Сохранить картинку как, либо скачиваем и сейчас ее можно вставить в любом месте нашего сайта.

Создание кнопки

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

Создать кнопку с помощью редактора  As Button Generator

Еще один интересный редактор – As Button Generator. Тоже простой и удобный. Здесь кнопки интересны сами по себе, а также есть очень неплохие эффекты.

Редактор As Button Generator

Если фон вашего сайта отличается от белого, то этот генератор позволяет подстраивать фон под нужный.

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

Следующая вкладка Gradation Type, в которой можно задать переход цвета по вертикали кнопки, полосатую фактуру, которую тоже можно настраивать, меняя цвет, толщину полос, промежуток между ними и т. д.

Редактирование кнопки

Еще одна вкладка – Filter. Генератор предупреждает, что если мы используем фильтр, то впоследствии уже не сможем редактировать текстовый элемент, либо картинку.

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

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

Появляется на кнопке форма текста, которую можно перетащить на средину и здесь уже текст редактировать.

Чтобы изменения вступили в силу, нажимаем на кнопку Apply. Здесь же можно менять размер текста, но перед этим предварительно текст надо выделить и только тогда будут происходить изменения. Можно также менять цвет текста и т. д.

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

Настроек тут очень много, а значит и вариантов выбора тоже. Если эти фильтры вам не нужны, их просто можно убрать.

Есть еще один фильтр – DropShadow Filter. Он может давать тень тексту, которую также можно редактировать.

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

Если выбранный вариант не нравится, идем на вкладку Image и нажимаем кнопку Delete selected element. При этом последовательно убирается надпись и фон кнопки.

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

Таким образом, генератор As Button Generator довольно интересный и можно с успехом его использовать.

Конструктор Cooltext

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

Конструктор Cooltext

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

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

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

Для выбора нужного шрифта просто жмем на него и попадаем на страницу с редактором.

Затем можно изменить размер надписи, сделать ее жирным, курсивом, изменить цвет текста.

Далее можно сделать шрифт с обводкой, выбрать ее толщину и цвет. Затем выбираем тип тени текста, ее цвет и размеры.

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

В конце блока есть довольно интересная функция Mouse Over, которая работает при наведении на кнопку мышью.

Если все изменения вас устраивают, нажимаем Greate Button и кнопка генерируется. В зависимости от того, какой шаблон используется, кнопка сохраняется в форматах png, gif и в других.

Создание кнопки в конструкторе Cooltext

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Поиск Яндекса
Группа Компьютерная грамотность
Подпишитесь на новости

Введите ваш email адрес:

Media Markt
Gyrotown