Как создать кнопку для сайта онлайн / webentrance.ru
Отличной альтернативой фотошопу и другим графическим редакторам, чтобы создать кнопку для сайта, являются онлайн-конструкторы.
С их помощью можно просто и быстро создавать кнопки нужного цвета, формы, размера и т. д.
Многие авторы размещают такие кнопки в письмах рассылки или где-нибудь под видео, на отдельной странице.
Содержание:
В любом случае, если кнопку создать, то она пробуждает гораздо больший интерес, чем, если вы просто разместили ссылку где-нибудь в записи.
Онлайн-конструктор 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. Тоже простой и удобный. Здесь кнопки интересны сами по себе, а также есть очень неплохие эффекты.
Если фон вашего сайта отличается от белого, то этот генератор позволяет подстраивать фон под нужный.
Генератор имеет несколько вкладок:
- На первой можно выбрать цвет, форму, размер и границу кнопки.
- Следующая вкладка — Gradation Type. Здесь можно задать переход цвета по вертикали кнопки, полосатую фактуру, которую тоже можно настраивать, меняя цвет, толщину полос, промежуток между ними и т. д.
- Еще одна вкладка – Filter. Генератор предупреждает, что если мы используем фильтр, то впоследствии уже не сможем редактировать текстовый элемент, либо картинку.
Поэтому фильтр рекомендуется использовать в самом конце редактирования, то есть после того, как будет добавлена на кнопку надпись.
В плане добавления текста генератор имеет несколько специфический редактор. Для того, чтобы его добавить, нужно нажать на кнопку Insert Text.
Появляется на кнопке форма текста, которую можно перетащить на средину и здесь уже его редактировать.
Чтобы изменения вступили в силу, нажимаем на кнопку Apply. Здесь же можно менять размер надписи, но перед этим предварительно текст надо выделить и только тогда будут происходить изменения. Можно также менять цвет и т. д.
Затем входим в фильтры, если дальше менять надпись не планируется. В фильтрах можно поиграть с настройками, чтобы создать кнопочку более интересной, изменить цветовое решение, подобрать эффекты, которые наиболее подойдут.
Настроек тут очень много, а значит и вариантов выбора тоже. Если эти фильтры вам не нужны, их просто можно убрать.
Есть еще один фильтр – DropShadow Filter. Он может давать тень надписи, которую также можно редактировать.
Еще одна интересная функция, которую можно использовать в качестве загрузки какого-нибудь уже готового фона.
При этом, конечно, нужно посчитать, чтобы размер картинки совпадал с размером кнопки, а также фон надо размещать раньше текста.
Если выбранный вариант не нравится, идем на вкладку Image и нажимаем кнопку Delete selected element. При этом последовательно убирается надпись и фон кнопки.
Кнопка возвращается в исходное состояние и с ней можно снова производить необходимые манипуляции.
Таким образом, генератор As Button Generator довольно интересный и чтобы создать кнопку, можно с успехом его использовать.
Конструктор Cooltext
Следующий интересный конструктор, который подойдет не только для того, чтобы создать кнопку, но также и для того, чтобы создать логотипы, какие-то надписи, создать анимированные эффекты и т. д., находится на сервере Cooltext, по адресу cooltext.com.
На нем есть возможность выбирать понравившийся шаблон и редактировать его, внося какие-либо незначительные изменения, либо полностью меняя его как угодно:
- Например, на выбранном шаблоне прямо на сервисе можно поменять надпись на кнопке на свою в предлагаемом редакторе.
- Кроме надписи можно изменить шрифт. Правда, шрифты открываются в новом окне, что не совсем удобно. Кроме того не все шрифты работают с русским текстом, поэтому при выборе нужно быть внимательным.
- Для выбора нужного шрифта просто жмем на него и попадаем на страницу с редактором.
- Затем можно изменить размер надписи, сделать ее жирным, курсивом, изменить цвет.
- Далее можно сделать шрифт с обводкой, выбрать ее толщину и цвет.
- Затем выбираем тип тени текста, ее цвет и размеры.
Второй блок Button Settings касается непосредственно самой кнопки. В настройках можно выбрать форму, размер, тип градиента, тип тени и другие параметры.
В конце блока есть довольно интересная функция Mouse Over, которая работает при наведении на кнопку мышью.
Если все изменения вас устраивают, нажимаем Greate Button и кнопка генерируется. В зависимости от того, какой шаблон используется, кнопка сохраняется в форматах png, gif и в других.
Если выбран эффект с мышкой, то для сохранения предлагается кроме двух картинок еще и код. В коде нужно всего лишь поменять url картинки на свой.
Вот такие сервисы доступны онлайн, чтобы создать кнопку для применения в самых различных случаях. Все они просты в использовании, интересны по своему, и, несомненно, заслуживают внимания.
Другие записи по теме:
Как сделать кнопку для сайта в онлайн сервисе
Кнопки сайта – одни из самых часто используемых элементов, которые помимо выполнения своей основной задачи, являются и частью дизайна. Каждый вебмастер хочет, чтобы дизайн его сайта был креативным и неповторимым. Если ваша фантазия оставляет желать лучшего, существуют сервисы, на которых можно почерпнуть вдохновения из эскизов или создать кнопку на основе готовых шаблонов.
В этой статье мы поговорим о том, как сделать кнопку для сайта в онлайн сервисе.
Как сделать кнопку для сайта самостоятельно
Сервис, о котором идет речь, называется Dabuttonfactory. Он позволит сделать кнопку для сайта любой сложности и настроить самые разные параметры. Настроив опции, вы сможете скачать получившийся результат в форматах png, jpg, gif или ico. Достоинством сервиса является возможность сразу наблюдать изменения, а также большое количество параметров, в том числе настройка градиентов и фона.
На главной странице сервиса Dabuttonfactory вы увидите набор готовых кнопок, которые можно скачать и использовать. На их основе вы можете создавать собственные уникальные оформления. Из любой готовой кнопки вы можете сделать кнопку для сайта, абсолютно уникальную. Достаточно просто кликнуть по понравившемуся шаблону, и перед вами появится визуальный редактор.
Справа и слева визуального редактора панели с инструментами. Так вы можете настроить форму кнопки, закругление ее углов, тип градиента фона, цвета, включить bubble эффект, включить или отключить границы, настроить границы, включить или отключить тень границ, настроить тень границ. Настройка данных параметров осуществляется на правой панели.
Слева вы можете настроить текст, выбрать шрифт, сделать его жирным или курсивом, настроить цвет и размер, включить или отключить тень текста, выбрать тени и ее глубину, а также выбрать размер, который может быть фиксированный или адаптированный под текст.
Когда вы закончили создание кнопки и убедились в том, что вас все устраивает, выберите формат кнопки в комбобоксе, который находится под самой кнопкой и нажмите «Download». После того как все готово, создайте FTP соединение или воспользуйтесь файловым менеджером своего хостинга, чтобы закинуть кнопку на сервер. Выберите нужную директорию и загрузите туда кнопку.
Все готово, осталось добавить ее на страницу, привязать к ней ссылку и с помощью CSS настроить параметры Hover и Down при необходимости.
Вам также будет интересно узнать о других способах создания кнопок на WordPress. Об этом здесь.
Как создать кнопки для сайта с html кодом, в режиме онлайн
Как можно сделать красивые кнопки для сайта?
В процессе создания сайта встает вопрос о добавлении всевозможных графических элементов в его дизайн. Это могут быть баннеры, фон страницы, красочные кнопки управления. Но что делать, если вы не обладаете должными дизайнерскими навыками? Вам помогут онлайн сервисы, с помощью которых можно сделать кнопки для сайта в режиме онлайн.
Оглавление:
- Сервис cooltext
- Сервис Da Button Factory
- Заключение
- Наши рекомендации
- Стоит почитать
Сервис cooltext
Первым в нашем списке идет вот этот сайт:
http://cooltext.com/
Давайте с его помощью сделаем красочную кнопку «Скачать». Переходите на главную страницу сервиса.
Здесь вы увидите список возможных вариантов оформления. Выберите подходящий, и щелкните на него. Откроется страница для редактирования.
Нам нужно указать все необходимые параметры для изображения. Давайте последовательно пройдем по всем пунктам.
- Logo text. Здесь нужно ввести текст, который вы хотите видеть на кнопке. Мы набираем «Скачать».
- Font. Этот параметр отвечает за шрифт. Если вам не нравится тот, который указан для этого стиля по умолчанию, вы можете изменить его.
- Text size. Размер шрифта — можете изменить его. Мы оставили стандартные «70»
- Use gradient. Данная опция позволяет использовать градиент в цветовом оформлении кнопки. Если вы хотите применить его, поставьте эту галочку. Дальше вам нужно отметить стиль градиента, и его направление (галочка «horizontal»).
- Outline color. Выбирайте цвет для рамки, которая будет отображаться вокруг кнопки.
- Outline width. И задавайте ее ширину.
- Shadow Type. Включение и выбор режима тени.
- Shadow Offset. Размер тени по горизонтали и вертикали соответственно.
- Shadow Color. А здесь мы зададим цвет тени для кнопки, и процент ее прозрачности.
- Alignment. Выравнивание текста относительно блока.
- Image Width&Height. Ширина и высота кнопки.
- File Format. В каком формате сохранить кнопку.
Пройдите все пункты, и установите нужные параметры. После этого вам следует нажать кнопку Create Logo. Вы перейдете на страницу результатов. Здесь можно скачать кнопку — нажмите «Download image«. Если результат вас не устроил, вы можете вернуться на страницу редактирования. Для этого используйте пункт «Edit image».
У нас получилась вот такая кнопка.
Сервис Da Button Factory
Еще один удобный инструмент, который попал нам на анализ. Заходите на главную страницу сервиса.
https://dabuttonfactory.com
Вы увидите предлагаемый конструктор.
В этот раз мы создадим кнопочку «Регистрация». Она тоже очень часто используется на сайтах.
Процесс аналогичен. Нам нужно последовательно указать все параметры, и скачать готовый файл. Давайте начнем.
- Text. Здесь мы снова вводим желаемый текст для кнопки. На этот раз мы пишем «Регистрация».
- Font. Выбираем шрифт. Мы оставили стандартный «Calibri». Можно сделать шрифт жирным — поставьте галочку «bold», или с курсивным начертанием — галочка «italic»
- Size. Размер шрифта.
- Color. Его цвет.
- Text shadow. И снова тень для текста. Если вы отметите эту галочку, она будет отображаться у надписи на кнопке. Нужно будет указать размер «Distance», и цвет «Color».
- Size. Размер кнопки. Выбираем фиксированные параметры — пункт «Fixed». В полях «Width» и «Height», задаем ширину и высоту соответственно.
- Style. Внешний вид кнопки. Можно выбрать прямоугольную, с закругленными краями и овальную. Мы оставили прямоугольный вариант — пункт»rectangular box».
- Background. Параметр цвета для кнопки. Мы оставили единый цвет «unicolored».
- Border. Рамка для кнопки
- Shadow. Тень для кнопки.
После того, как вы полностью настроили свою кнопку, выбирайте тип готового файла. Для этого в центре экрана есть выпадающий список. После этого просто щелкайте на кнопку указателем мыши, и вызывайте контекстное меню. Затем щелкайте пункт «Сохранить изображение как«, и выбирайте папку, в которую вы хотите сохранить готовую кнопку.
У нас получилось вот что.
Видео к статье:
Заключение
Таким образом, вы сможете сами создавать несложные элементы дизайна — логотипы, кнопки и тд. Нет необходимости прибегать к дорогостоящим услугам дизайнера. Если вы планируете создать небольшой сайт, то подобной графики вполне будет достаточно.
Наши рекомендации
Самые популярные теги в инстаграм.
Как удалить яндекс браузер.
Как очистить кэш браузера гугл хром.
Стоит почитать
Зачем искать информацию на других сайтах, если все собрано у нас?
Как сделать красивые кнопки для сайта
Привет читателям блога egofilin.ru!
Используете ли вы на своих проектах красивые кнопки и графические элементы наряду с текстовыми ссылками. Признаться, я сам до недавнего времени мало уделял внимания этому вопросу и не придавал особого значения красивым кнопкам. Но согласитесь, что аккуратно и гармонично размещенная кнопка или графическая ссылка приятно радуют глаз, а иногда по ней так и хочется щелкнуть. Может быть, это только мои ассоциации, но ничего не могу поделать, нравится мне все красивое, и только отсутствие художественного таланта мешает сделать сайт более привлекательным с этой стороны.
Сегодня мы с помощью онлайн генератора научимся делать красивые кнопочки для сайта, при использовании которых на своих ресурсах, содержимое будет принимать более привлекательный вид. Также разберем, для тех, кто не в теме, как же эти красивые кнопки установить на сайт (как создать сайт) после их создания.
Конечно, можно воспользоваться фотошопом и большинство вебмастеров и рисунки, и кнопки делает именно в этой программе. Ну а те, кто не знаком с этим монстром, или никак не начнет его использовать, как я, например, что прикажете делать?
А для этого и существуют онлайн генераторы, в которых можно быстренько сделать себе кнопочки и разместить на своем ресурсе и все это бесплатно.
Итак, знакомьтесь с одним из них.
As Button Generator – онлайн генератор для создания красивых кнопок на сайте
Правда он на английском языке, но пусть вас это не пугает, т.к. мы разберем все пункты меню и для чего они предназначены. Переходим по ссылке на сайт и начинаем творить.
Разберем первую вкладку Color/Form, само название говорит за себя, здесь можно изменять форму и цвет кнопки в режиме онлайн.
Color – ее цвет.
Width (ширина) – с помощью ползунка можно регулировать в необходимых для вас пределах.
Height (высота), также можно регулировать и изменять размер кнопки по высоте.
Border Color – цвет границы (рамки), если она присутствует.
Round strength – скругление углов вашего макета, меняется от 0 (кнопка в виде прямоугольника) и далее по шкале до размеров эллипса.
Border thickness – толщина границы вашего эскиза кнопки.
Соответственно, меняя положения ползунков в данном разделе меню, вы можете выбрать такую картинку, которая вам по душе.
Переходим к следующему пункту меню для создания бесплатной кнопки на сайт, которая называется Gradation Type.
Здесь можно выбрать эскиз из 5 присутствующих образцов. Вид под номером 3, как видите, это чистая кнопка без выделенной области.
Следующая вкладка Stripe – на объект накладываются полосы и в данном меню можно менять их расположение, расстояние между ними, толщину. Попробуйте, сами поменяйте положение на присутствующих шкалах и выберете то изображение, которое более приглянется.
Если вы не хотите, чтобы на вашей кнопке присутствовали полосы, то пометьте Don’t use не использовать. По умолчанию стоит в положении Use (использовать полоски).
Следующий пункт носит название Filter, очень много настроек, переместитесь на данную вкладку и сами попробуйте поэкспериментировать, много различных эффектов и оттенков создаваемого эскиза.
Раздел Image, как вы, наверное, догадались, позволяет накладывать различные картинки на создаваемую кнопку. Переходите в данный пункт, перед вами две клавиши Insert Image (с помощью нее добавляете изображение с компьютера) и Delete Selected Element (нажатием на нее удаляете нанесенные рисунки.
Хотелось бы отметить, что после того, как вы поместите на кнопку какой то графический элемент с компьютера, его размеры уже нельзя поменять, поэтому о размерах позаботьтесь заранее.
Пункт «Text» позволяет наносить необходимый текст на создаваемую в онлайн генераторе красивую кнопку.
При нажатии на “insert text” на созданном эскизе выскочит текст на английском edit me (измени меня), теперь подводим мышку к картинке, появляется белый крестик. Нажатием левой клавишей мыши перетаскиваем текст в то место, где будет отображаться надпись. Внизу вы увидите панель редактирвания как в word, здесь меняем надпись на свою, выбрав соответствующий шрифт, размер и т.д. Теперь нажатием на “Apply”, любуемся созданной надписью.
Чем мне приглянулся данный онлайн генератор, так это тем, что между вкладками можно перемещаться туда-сюда и менять и размеры, и цвет, и оттенки, и текст кнопки, пока не нажмете кнопку Save, т.е. пока не сохраните полученное изображение. Например, налепили вы на кнопку картинку или текст, а они оказались великоваты и выходят за границы, либо наоборот малы, можно вернуться на соответствующую вкладку и увеличить размеры создаваемого шедевра, либо уменьшить.
Вот, собственно, и все. Мы создали красивую кнопку для сайта с помощью онлайн генератора As Button Generator. Сохраняем созданный рисунок на компьютере нажатием кнопки “Save”.
Теперь нам нужно созданную картинку добавить в то место на сайт, где мы ее хотим созерцать.
На скорую руку я набросал несколько рисунков в генераторе, отнюдь не претендующих на высокое художественное мастерство, возможно у вас получится красивее, все в ваших руках, дерзайте.
Как добавить кнопку на сайт
Что такое по большому счету красивая кнопка на сайте? Как правило, это ссылка, ведущая куда-либо посетителя, будь то другая страница, либо сторонний ресурс. А посему у нее должен быть прописан адрес, куда она направляет, а также должен быть прописано место хранения данного изображения на хостинге.
Для этого наш рисунок необходимо закачать на хостинг (как выбрать хостинг для сайта) в соответствующую папку. Если у вас блог на wordpress, то в редакторе просто добавляем медиафайл нажатием на соответствующую кнопку и закачиваем его на сервер, рисунок автоматически закачается, и смотрим там же в панели ее адрес.
Вот как будет выглядеть код любой картинки в режиме html, если она является ссылкой.
1 | <a href="АДРЕС СТРАНИЦЫ"></a> |
<a href=»АДРЕС СТРАНИЦЫ»></a>
Вот этот код и размещаете в том месте, где хотите видеть отображение созданной кнопки.
Можете почитать следующие статьи, где я описывал, как размещать баннер на сайте, они будут вам полезны, если вы испытываете затруднения с размещением изображений на своем ресурсе.
Как картинку сделать ссылкой
Как разместить баннер на блог
Как поместить баннер в шапку сайта
На этом разрешите откланяться. В сегодняшней статье вы узнали, как с помощью онлайн герератора As Button Generator сделать красивые кнопки и добавить их на сайт.
Чтобы быть всегда в курсе выхода новых статей на блоге, советую подписаться на обновления и получать анонсы постов на адрес электронной почты.
Успехов вам!
В заключении посмотрите видео о том, как хомячок троллит гаишника, по моему веселенькое видео