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

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

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

Создаем кнопки для сайта с помощью сервиса «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 код кнопки.

Копируем код кнопки для сайта.

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

<p style="text-align: center;"><a href="http://neturoki.ru/translit" target="_blank"><img onmouseover="this.src='http://neturoki.ru/wp-content/uploads/2013/09/buttonmouseover.png';" onmouseout="this.src='http://neturoki.ru/wp-content/uploads/2013/09/button.png';" alt="" src="http://neturoki.ru/wp-content/uploads/2013/09/button.png" /></a></p>

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

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

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

Проблема с кириллицей.

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

Перейти на сайт Сибирского Здоровья.

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

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

Нажимайте кнопки! Делитесь информацией с друзьями! Нажимайте кнопки! Делитесь информацией с друзьями!

Получайте информацию о новых акциях и новостях на свою электронную почту!

 

Введите адрес электронной почты:

 

 

Как создать кнопки для сайта.: 13 комментариев

  1. Елена Голоштенко

    Вот из-за различных недостатков онлайн сервисов я ими и не пользуюсь почти. По мне — так проще нарисовать кнопку в фотошопе, притом в дизайне нет вообще никаких ограничений, сделать второй вариант при наведенном курсоре, все это сохранить одним файлом и при помощи CSS спрайтов вставить на блог (хе, а раньше это сочетание слов меня очень пугало smile).

  2. Яна

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

  3. Денис

    Познавательная статья, спасибоsmile я как-то стандартными кнопками пользовался, не задумывался, что есть сторонние кнопки, бродя по интернету наткнулся на Вашу статью, теперь точно установлю новые кнопки, воспользовавшись Вашей инструкцией, спасибо большое!)) А-то кнопка «Читать далее» на блоге, какая-то скучная smile

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Разместить ссылку на свою статью