Создание кнопки <button>, что ссылка в HTML

В принципе, мне нравится стиль <input type="submit">, с кнопкой clickable при добавлении небольшого CSS. Тем не менее, обычные кнопки не стилизованы как таковые, они не имеют такой кликабельности без каких-либо основных CSS или JS, и вы должны использовать изображения.

Я сделал кнопки отправки в ссылки, используя действие формы, но для этого требуется, чтобы я сделал новую форму для каждой кнопки. Как я могу найти счастливую среду? Использование нескольких форм вызывает проблемы в моем стиле, которые я не могу исправить, если не найду другого способа сделать кнопки, которые являются ссылками в HTML, которые имеют стиль по умолчанию, что делает их нажатыми (и я не имею в виду настройки браузера по умолчанию).

Любые идеи?

Ответ 1

<a href="#"><button>Link Text</button></a>

Вы попросили ссылку, которая выглядит как кнопка, поэтому используйте ссылку и кнопку:-) Это сохранит стиль кнопки браузера по умолчанию. Кнопка сама по себе ничего не делает, но нажатие на нее активирует родительскую ссылку.

Демо:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

Ответ 2

У вас есть три варианта:

Связывание стиля с похожими кнопками с помощью CSS.

Просто посмотрите на синие "теги" по вашему вопросу.

Возможно, даже при нажатии на них нажатие (с использованием псевдоклассов вроде: active) без каких-либо скриптов. Многие основные сайты, такие как Google, в наши дни начинают создавать кнопки из стилей CSS, скрипты или нет.
Поместите отдельный элемент <form> вокруг каждого.

Как вы упомянули в вопросе. Легко и определенно будет работать без Javascript (или даже CSS). Но он добавляет немного дополнительного кода, который может выглядеть неопрятным.
Полагайтесь на Javascript.

Это то, что вы сказали, что не хотите делать.

Ответ 3

Немного проще, и он выглядит точно так же, как кнопка в форме. Просто используйте ввод и оберните вокруг него привязывающий тег.

<a href="#"><input type="button" value="Button Text"></a>

Ответ 4

Использовать javascript:

<button onclick="window.location.href='/css_page.html'">CSS page</button>

Вы всегда можете стилизовать кнопку в css anyaways. Надеюсь, это помогло!

Удачи!

Ответ 5

Три простых способа: IMHO

1: вы создаете образ кнопки и кладете вокруг нее href. (Нехороший способ, вы теряете гибкость и обеспечиваете множество трудностей и проблем.)

2 (Самый простой) → JQuery

<input type="submit" someattribute="http://yoururl/index.php">

  $('button[type=submit] .default').click(function(){
     window.location = $(this).attr("someattribute");
     return false; //otherwise it will send a button submit to the server

   });

3 (также легко, но я предпочитаю предыдущий):

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">

$fn.somefunction= function(url) {
    window.location = url;
};