URL-адрес доступа с помощью нажатия кнопки HTML

Question

Я написал код, как показано ниже:

<button class="btn post-btn">Read More &nbsp;
<a href="https://sway.office.com/iDYEqw?ref=Link"></a> 
<i class="fas fa-arrow-right"></i></button>

Однако, когда я нажимаю кнопку, она перенаправляется на веб-сайт, но изображение кнопки и текст внутри нее становятся больше.

Мой измененный код:

<a href="https://sway.office.com/iDYEqw?ref=Link" class="btn post-btn">Read More &nbsp;</a> 
                            <i class="fas fa-arrow-right"></i></button>



enter code here

Как это исправить? Спасибо.

Answer 1

Кнопка работает не так, вы должны либо использовать только тег <a>, либо создать событие onclick для вашей кнопки, чтобы выполнить перенаправление за вас, либо вы можете обернуть свою кнопку внутри form и установите действие формы на желаемый URL .

Вы также можете заключить свою кнопку в <a>, что вообще не рекомендуется, потому что согласно W3 C .org HTML docs это не стандартный способ. Аналогичный вопрос об упаковке <button> внутри <a> в SO.

• Использование только тега <a>. Затем вы можете стилизовать его как кнопку, чтобы было удобнее.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<a href="https://sway.office.com/iDYEqw?ref=Link">Read More &nbsp;<i class="fas fa-arrow-right"></i></a>

• Использование <button> с onclick. Затем вы можете перенаправить на нужную страницу, изменив значение window.location.href.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  window.location.href = "https://sway.office.com/iDYEqw?ref=Link"
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<button class="btn post-btn">Read More &nbsp;
<i class="fas fa-arrow-right"></i></button>

• Оберните <button> внутрь form. Затем установите действие формы на желаемый URL.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<form action="https://sway.office.com/iDYEqw?ref=Link" method="GET">
  <button>Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
</form>

Answer 2

Это простое исправление. Вам просто нужно поместить кнопку внутри элемента a и немного CSS, чтобы он выглядел нормально:

a {
color: black;
text-decoration: none;
}

<a href="https://sway.office.com/iDYEqw?ref=Link">
  <button class="btn post-btn">Read More &nbsp;
</a> 
<i class="fas fa-arrow-right"></i></button>