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

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

В данном примере я хочу создать кнопку, при нажатии на которую, чтобы открывалась страничка «Транслит». Для быстрого создания кнопок я воспользуюсь сервисом генератора кнопок «COOLTEXT».

Создаем кнопки для сайта с помощью сервиса «COOLTEXT».

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

Что обозначают элементы генератора кнопок для сайта.

В самом верху мы видим изображение нашей кнопки, под ним мы можем ввести текст кнопки. Я ввожу свой текст – «TRANSLIT». По мере ввода текста меняется надпись на изображении самой кнопки.

Далее мы видим окно «Font», нажав на которое мы можем выбрать шрифт для надписи создаваемой кнопки. В открывшемся окне мы можем выбрать один из 1200-т предлагаемых генератором разновидностей шрифтов. Шрифты разбиты по категориям «Font Categories». После выбора категории мы можем выбрать непосредственно шрифт «Some Random Fonts» нажатием надписи «Use» непосредственно под шрифтом.

После выбора шрифта мы можем выбрать цвет надписи кнопки «Color», размер текста «Text Size», сделать текст полужирным «Bold» и сделать текст наклонным «Italics».

Генератор позволяет нам выбрать цвет и толщину контура букв текста кнопки «Outline». Мне контур не нужен, поэтому для толщины контура «Thickness» я выбираю параметр «None». Далее, мы можем выбрать тип тени для букв и цвет тени «Shadow». Мне тень тоже не нужна, поэтому для типа тени «Type» я выбираю параметр «None». С помощью «Offset» мы можем отрегулировать расположение надписи внутри кнопки по вертикали «X» и горизонтали «Y».

Теперь поработаем над дизайном самой кнопки.

Мы можем выбрать внешний вид кнопки «Shape». Для своей кнопки я выбираю прямоугольник с округленными углами «Rounded». Далее, выбираем тип заливки кнопки и цвет заливки «Fill». Для своей кнопки я выбираю заливку без градиента «Flat», поэтому мне достаточно выбрать цвет заливки первой кнопкой «Color». Если выбирается цвет заливки с градиентом, тогда необходимо воспользоваться двумя кнопками «Color», определяющими в этом случае цвета начала и окончания цветового градиента. С помощью «Outline» выбирается толщина и цвет рамки кнопки. Для своей кнопки я выбираю толщину с параметром «Huge». «Shadow» определяет тип и цвет тени контура кнопки. Мне тень не нужна, поэтому для «Type» я выбираю параметр «None».

С помощью «Effect» мы можем сделать кнопку выпуклой, вогнутой и т.д. Для себя я выбираю в этом случае «Flat». «Mouse over» определяет вид кнопки при на наведении на нее курсора. Я выбираю «Bright».

С помощью параметров «Size» мы можем подобрать ширину «Width» и высоту «Height» кнопки. Если стоят галочки «Auto», ширина и высота кнопки устанавливаются автоматически в зависимости от размера текста надписи кнопки.

Всё, наша кнопка готова. Нажимаем на кнопку «Create Button» и смотрим, что у нас получилось.

Мы видим три изображения кнопки. Первое изображение – сама кнопка, второе изображение – вид кнопки при наведении на неё курсора. На третьем изображении кнопки мы можем непосредственно испытать, как кнопка будет изменяться при наведении на неё курсора. Нажимая на надписи «Download Image» скачиваем первое и второе изображение себе на компьютер. Создаем текстовый документ и копируем в него HTML код из рамки.

Обрабатываем изображения кнопок для сайта.

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

Далее, я переименовываю изображения так, как мне удобно. Важно!!! Для отсутствия нежелательных глюков при работе в «WordPress» необходимо, чтобы наименования изображений не содержали в себе заглавные буквы! О том, что наименования должны быть обязательно на латинице Вы, наверное, помните.

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

http://neturoki.ru/wp-content/uploads/2013/09/button.png

http://neturoki.ru/wp-content/uploads/2013/09/buttonmouseover.png

Теперь в полученном от сервиса «COOLTEXT» HTML коде произведем замену адресов.

В моем случае получился вот такой код.

Сделаем так, чтобы кнопка показывалась по центру.

Вставляем полученный код в запись.

Присваиваем ссылку для кнопки.

Всё! Кнопка для сайта готова!

Теперь можно скопировать HTML код кнопки.

В моем случае получился код.

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

Недостатки сервиса создания кнопок для сайта «COOLTEXT».

К сожалению, сервис «COOLTEXT» не лишен недостатков. Я не могу сказать, с чем это связано, но если я раньше без проблем создавал с помощью этого сервиса кнопки для сайтов на русском языке, то теперь для этого сайта с кнопками от «COOLTEXT» у меня начались проблемы. Когда я пытаюсь в генератор выбранной мной кнопки вписать надпись на кириллице, надпись на кнопке выдаёт мне одни только вопросики.

Но, если я выбираю дизайн кнопки с помощью сервиса «COOLTEXT» для сайта «Сибирского Здоровья», проблем с кириллицей нет.

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

Уроки на все случаи жизни