Кнопка как ссылка

К

Задачи при верстке встречаются разные, может понадобиться и кнопку сделать сссылкой. Ниже перечислены несколько вариантов, от повсеместно признанных (за свою простоту и надежность), так и экстравагантные. Все способы сделать кнопку как ссылку на этой странице – рабочие. Какой выбрать – зависит от ваших задач.

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

<a href="#"><img src="pic.jpeg"></a>

2. Сделать кнопку ссылкой можно и с помощью JS. При нажатии на кнопку срабатывает событие onClick, и происходит перенаправление на нужную страницу. Если по каким-то причинам пользотель отключил JS в своем браузере – не беда. Вместо кнопки он увидит ссылку с текстом. Будет не так красиво, зато сайтом можно будет продолжать пользоваться.

<script type="text/javascript" language="javascript">
<!— document.write(" <input type=\"button\" onClick=\"window.location.href = 'index.html'\" value=\"Кнопка\">"); //или <button> //—>
</script>
<noscript>
<a href="index.html">Кнопка</a>
</noscript>

3. Один из эксравагантных способов сделать кнопку ссылкой. При нажатии кнопки браузер отправит GET-запрос по нужному вам адресу, тем самым задача будет решена. Использовать не рекомендую, но как разминка для мозгов («почему так работает» и «хочу попробовать») отлично подойдет.

<form action="index.html" method="GET">
<input type="submit" value="Кнопка" />
</form>

4. Этот способ тоже работает с помощью JS и события onClick. По сути своей работы ничем не отличается от варианта 2. Но если у пользователя в браузере не работает JS, кнопка перестанет работать, т.е. пользоваться кнопкой как ссылокй не получится. Общий принцип работы двух следующих примеров – одинаков.

<input value="Кнопка" onclick="location.href='index.html'" type="button" />

или

<button onclick="location.href='index.html'">
<img src="image.gif" />
</button>

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

<style>
.sur
{
background: url('bg.gif');
}
</style>
<form action="index.html" method="GET">
<input class="sur" value="Кнопка" onclick="location.href='index.html'" type="button" />
</form>

Дмитрий Волотко