Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.
Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов – это создать кнопку в Photoshop и разместить её на сайте.
Кнопка, созданная в каком либо графическом редакторе, например Photoshop – это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.
Второй важный момент – это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта https://www.s1-agency.ru/
На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.
Есть вот такой интересный сервис – dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.
Удобно то, что в процессе создания кнопочки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.
Первое поле TEXT – вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.
Выбираем шрифт Font. Выбираем Sans – serif, Bold – Жирный, Italic – курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.
Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.
Color – цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.
Text Shadow – тень у текста. Distance – расстояние от текста до тени, Color – цвет тени. Пробуйте. Вы будете видеть результат.
Output type – Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.
Переходим к правой части экрана. Button Type – возможные варианты – круглая, квадратная и с закругленными углами. Я оставила круглую.
Background – фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент – перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.
Border – граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.
Shadow – тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.
Size – размер кнопки. Variable – варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed – фиксированный размер (то есть независимо от длинны текста). И задаю ширину – 150 и высоту 50.
Теперь Вам нужно сохранить вашу кнопочку на вашем компьютере. Для этого кликаем по ней. Выскакивает окошко сохранения файла button.jpeg. Дальше Вы уже знаете, что с ней делать – разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта.
