Красивая кнопка для сайта: Красивые кнопки для сайта HTML + CSS — 24 готовых варианта

31.07.2023 alexxlab

Содержание

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

Привет читателям блога 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>

Вот этот код и размещаете в том месте, где хотите видеть отображение созданной кнопки.

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

Как картинку сделать ссылкой

Как разместить баннер на блог

Как поместить баннер в шапку сайта

На этом разрешите откланяться. В сегодняшней статье вы узнали, как с помощью онлайн герератора As Button Generator сделать красивые кнопки и добавить их на сайт.