Создание кнопки <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;
};