Безпосередньо кнопку не можна зробити посиланням, HTML забороняє комбінувати між собою елементи <button> (а також <input>) та <a>. Таким чином, не можна вкладати кнопку в посилання, а посилання в кнопку. Є три способи, як зробити так, щоб при натисканні на кнопці відбувалося відкриття веб-сторінки.
Використання HTML
Кнопку <button> вкладаємо всередину елемента <form> і для форми вказуємо атрибут action з адресою веб-сторінки (приклад 1). Додатково можна додати атрибут target зі значенням _blank, тоді веб-сторінка відкриється у новій вкладці браузера.
Приклад 1. Атрибут action
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form action="page/new.html" target="_blank"> <button>Перехід за посиланням</button> </form> </body> </html>
У цьому прикладі при клацанні по кнопці відкривається веб-сторінка new.html у новій вкладці.
Одну форму не можна вкладати всередину іншої . Перед додаванням кнопки переконайтеся, що у вас є тільки одна форма. /span> і стилізуємо посилання, щоб воно стало схожим на кнопку. У прикладі 2 показаний клас btn, при додаванні його до елемента <a> посилання змінює своє оформлення.
Приклад 2. Стилізація посилання
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопка</title> <style> .btn { display: inline-block; /* Рядково-блоковий елемент */
background: #8C959D; /* Сірий колір фону */
color: #fff; /* Білий колір тексту */
padding: 1rem 1.5rem; /* Поля навколо тексту */
text-decoration: none; /* Забираємо підкреслення */
border-radius: 3px; /* Скруглюємо куточки */
}
</style>
</head>
<body> <a href="page/new.html" class="btn">Перехід за посиланням</a>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Стилізація посилання
Використання JavaScript
Для переходу до вказаної веб-сторінки можна скористатися подією onclick, додаючи його до елемента <button>. Всередині onclick пишемо document.location, а значення адреси бажаної веб-сторінки (приклад 3). Зверніть увагу на комбінацію лапок, адреса веб-сторінки береться в одинарні лапки.
Приклад 3. Подія onclick
<! <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <button onclick="document.location='page/new.html'">Перехід за посиланням</button> </body> </html>