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

Question

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

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

Есть идеи?

Answer 1

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

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

Демонстрация:

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

Answer 2

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

• Стилизуйте ссылки так, чтобы они выглядели как кнопки с помощью CSS.

  Просто посмотрите на голубые «теги»под вашим вопросом.

  Можно даже придать им удручающий вид при нажатии (используя псевдоклассы вроде: active), без каких-либо сценариев.Многие крупные сайты, такие как Google, в любом случае начинают создавать кнопки из стилей CSS, используя сценарии или нет.

• Поместите отдельный элемент вокруг каждогоодин.

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

• Положитесь на Javascript.

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

Answer 3

ВАЖНО: <button> никогда не должно быть потомком <a>.

Попробуйте <a href="http://stackoverflow.com"><button>Link Text</button></a> в любом html-валидаторе, например https://validator.w3.org, и вы получите ошибку. Нет смысла использовать кнопку, если вы используете , а не . Просто введите <a> с помощью css, чтобы он выглядел как кнопка. Если вы используете фреймворк, такой как Bootstrap, вы можете применить стиль (ы) кнопок btn, btn-primary и т. Д.

jsfiddle: ссылка в стиле кнопки

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

a.btnStack:hover {
  background-color: #000;
}

<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stackoverflow.com</a>

Answer 4

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

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

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

Удачи!

Answer 5

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

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

Answer 6

3 самых простых способа ИМХО это

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;
};