Если Вы заметили, у меня на сайте кнопки при наведении на них курсора меняют цвет. Как создать кнопки для сайта с подобным эффектом я покажу на простом примере.
В данном примере я хочу создать кнопку, при нажатии на которую, чтобы открывалась страничка «Транслит». Для быстрого создания кнопок я воспользуюсь сервисом генератора кнопок «
Создаем кнопки для сайта с помощью сервиса «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» для сайта «Сибирского Здоровья», проблем с кириллицей нет.
В связи с этим, для меня стала насущной проблема создания кнопок для сайта с помощью другого сервиса. Другие сервисы позволяющие быстро создавать кнопки для сайта мы обсудим в следующей статье.
Вот из-за различных недостатков онлайн сервисов я ими и не пользуюсь почти. По мне — так проще нарисовать кнопку в фотошопе, притом в дизайне нет вообще никаких ограничений, сделать второй вариант при наведенном курсоре, все это сохранить одним файлом и при помощи CSS спрайтов вставить на блог (хе, а раньше это сочетание слов меня очень пугало
).
Такой урок понятен.Думаю пригодится.Спасибо.
Ничего идеального не существует. Мы тоже не идеальны. Так точно и в программах возникают ошибки. Я не пользовалась такой програмкой для кнопок не знаю как она работает. Но думаю, что подобных можно найти много и протестировать. Возможно найдется качественная.
Я пользуюсь кнопками плюсо, они меня устраивают.
Я пользовался этим сервисом как-то один раз. Но то, что я хотел получить, в итоге так достичь и не смог. Может я не могу им пользоваться?
Очень интерестная статья. Для меня много нового.
В скором времени воспользуюсь
Для меня это как-то очень заумно, но надо сесть и разобраться. Кнопки для сайта ведь очень важны!
Интересно и очень полезно! Когда-нибудь воспользуюсь вашими советами!
Для меня тоже все заумно, мне вообще надо долго долго разбираться, но статья интересная и весьма полезная.
Интересный сервиз. Проблемы с кириллицей, я думаю, связаны с кодировками сайта. Просто надо в этом разобраться лучше и посмотреть, подходит ли это тебе.
Интересная статья. Внимательно прочитал, думаю, что пригодится. Все подробно и понятно. Спасибо. Удачи!
Познавательная статья, спасибо
я как-то стандартными кнопками пользовался, не задумывался, что есть сторонние кнопки, бродя по интернету наткнулся на Вашу статью, теперь точно установлю новые кнопки, воспользовавшись Вашей инструкцией, спасибо большое!)) А-то кнопка «Читать далее» на блоге, какая-то скучная 
Интересный сервис, возьму на заметку. А траблы видимо из-за шрифтов. Возможно не все поддерживают кириллицу или их не хватает в шаблоне.Умно продвигаем новые сайты 
Олег! Интересная публикация: