Как создать кнопку HTML, которая действует как ссылка?

Question

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

Мне бы тоже хотелось, чтобы в URL не было никаких дополнительных символов или параметров.

Как мне этого добиться?

---

Основываясь на ответах, опубликованных до сих пор, я сейчас делаю это:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

, но проблема в том, что в Safari и Internet Explorer он добавляет знак вопроса в конце URL-адреса. Мне нужно найти решение, которое не добавляет символы в конец URL.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы она выглядела как кнопка.

Использование JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Но для этого, очевидно, требуется JavaScript, и по этой причине он менее доступен для программ чтения с экрана. Смысл ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать как ссылка - неправильное решение. Я предлагаю вам использовать ссылку и оформить ее так, чтобы она выглядела как кнопка .

<a href="/link/to/page2">Continue</a>

Answer 1

Также вы можете использовать кнопку:

Например, в Синтаксис ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


<style>
       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }
</style>

Answer 2

7 способов сделать это:

1. Использование window.location.href = 'URL'
2. Использование window.location.replace('URL')
3. Использование window.location = 'URL'
4. Использование window.open('URL')
5. Использование window.location.assign('URL')
6. Использование HTML форма
7. Использование HTML anchor tag

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

Answer 3

Я использовал это для сайта, над которым я сейчас работаю, и он отлично работает !. Если вы хотите немного крутого стиля, я поставлю здесь CSS.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

Рабочая JSFiddle здесь .

Answer 4

Люди, которые ответили, используя <a></a> атрибуты на <button></button>, помогли.

НО тогда недавно я столкнулся с проблемой, когда использовал ссылку внутри <form></form>.

Кнопка теперь рассматривается как / кнопка отправки (HTML5). Я попытался обойти и нашел этот метод.

Создайте кнопку в стиле CSS, как показано ниже:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
    background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );

}

Или создайте новый здесь: Генератор кнопок CSS

А затем создайте свою ссылку с тегом class , названным в соответствии с вашим стилем CSS:

<a href='link.php' class='btn-style'>Link</a>

Вот скрипка:

JS Fiddle

Answer 5

Вы можете использовать JavaScript:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

Замените http://www.google.com на свой веб-сайт, обязательно включите http:// перед URL.

Answer 6

Вы также можете установить кнопки type-property в «кнопку» (она не отправляет форму), а затем вложить ее в ссылку (она перенаправляет пользователя).

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

Пример:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

Таким образом, первая кнопка перенаправляет пользователя, а вторая отправляет форму.

Будьте осторожны, чтобы убедиться, что кнопка не вызывает никаких действий, так как это приведет к конфликту. Также, как указал Ариус, вы должны знать, что по вышеуказанной причине, строго говоря, это не считается действительным HTML, согласно стандарту. Однако в Firefox и Chrome он работает должным образом, но я еще не тестировал его для Internet Explorer.

Answer 7

Введите window.location и нажмите enter в консоли браузера. Тогда вы можете получить четкое представление о том, что location содержит

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/1465054/kak-sozdat-knopku-html-kotoraya-deistvuet-kak-ssylka 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

Здесь вы можете установить любое значение.

Так что для перенаправления на другую страницу вы можете установить значение href по вашей ссылке.

   window.location.href = your link

В вашем случае -

   <button onclick="window.location.href='www.google.com'">Google</button>

Answer 8

в JavaScript

setLocation(base: string) {
  window.location.href = base;
}

В HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

Answer 9

Если вам нужно, чтобы она выглядела как кнопка, с акцентом на градиентное изображение , вы можете сделать это:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

Answer 10

Если вы хотите перенаправить страницы, которые находятся на вашем сайте, то вот мой метод - Я добавил атрибут href к кнопке и по щелчку мыши присвоил this.getAttribute ('href') для document.location.href

** Это не будет работать, если вы ссылаетесь на URL вне вашего домена из-за 'X-Frame-Options' в 'sameorigin'.

Пример кода:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>