Как сделать кнопку на сайте ссылкой.

Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.

Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop и разместить её на сайте.

Кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.

1. <img src=»files/img/img.jpg» width=»200″ height=»67″>Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.

Второй важный момент — это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта /

2. <a href=»»>/</a>Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg).

3. <a href=»/» target=»_blank»>
<img src=»files/img/img.jpg» alt=»Главная страница»
width=»200″ height=»67″ border=»0″></a>Теперь сделаем относительную ссылку (относительная ссылка — это ссылка работающая в пределах одного сайта).

4. <a href=»articles.html» target=»_blank»>
<img src=»files/img/stat.jpg» alt=»Статьи сайта seoklub.ru»
width=»200″ height=»67″ border=»0″></a>Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!

На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.

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

Есть вот такой интересный сервис — . Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.

Удобно то, что в процессе создания кнопочки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.

Первое поле 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. Дальше Вы уже знаете, что с ней делать — разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта.