Как сделать кнопку ссылкой html: кнопку ссылкой

Содержание

HTML кнопка – незаменимый помощник для навигации по сайту

2014-06-20 0 ∞

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

Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.

Как сделать кнопку в HTML?
Виды кнопок html
- 1. Кнопка-ссылка HTML
- 2. Кнопка Submit
- 3. Кнопка Reset
- 4. HTML кнопка с картинкой

Кнопки для сайта HTML создаются одним из двух способов:

1. С помощью тега input. Синтаксис такой команды выглядит следующим образом:

 <input type="button" value=надпись на кнопке>

2. С помощью тега button:

<button>Надпись на кнопке</button>
Пример кода, который выполняет создание кнопки в <b>html</b> сразу двумя этими способами:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body> 
  <form>
   <p><input type="button" value=" Кнопочка1 "></p>
   <p><button>Кнопочка2</button></p>
  </form>
 </body>
</html>

В результате получаются две одинаковые кнопки:

Таким образом, хотя получились две абсолютно одинаковые кнопки html, код для них немного разный. Не имеет значения, как создать кнопку в html.

Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.

Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button.

Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:

Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю», используется следующая команда:

<a href="#имя якоря">название кнопки</a>

Нажатие на название кнопки, моментально переводит курсор к «якорю».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:

<!DOCTYPE html>
<html>
 <head>
    <title>Якорь</title>
 </head>
 <body> 
  <form>
   <a name="top"></a>
   <p><a href="#end">вниз</a></p>
…
   <p><a href="#top">вверх</a></p>
…
   <a name="end"></a>
  </form>
 </body>
</html>

Выглядит это следующим образом:

Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:

<p><input name="login"></p>
<p><input type="submit"></p>

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

<input type="reset" value="Название кнопки">

В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:

<input type="image" src="ссылка на картинку">"

Кнопка с картинкой и текстом:

<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>

Например:

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

Удачи!

АРАлина Рыбакавтор

Как кнопку сделать ссылкой? | Результаты поиска Все результаты Сайтостроение.

Полезные советы по созданию сайта

Непосредственно кнопку нельзя сделать ссылкой, 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 в новой вкладке.

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

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

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от <button> и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 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»>Переход по ссылке</a>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Стилизация ссылки

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

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу <button>. Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Кнопка</title>
</head>
<body>
<button>Переход по ссылке</button>
</body>
</html>

Автор: Влад Мержевич
Источник: webref.ru

5 способов создания ссылок на кнопки HTML (простые примеры)

Последнее обновление: 22 февраля 2022 г.

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

Самый простой способ создать HTML-ссылку на кнопку — поместить кнопку в тег привязки —

Как создавать ссылки с якорным текстом в …

Включите JavaScript

Как создавать ссылки с якорным текстом в WordPress

Но на самом деле есть несколько других способов сделать это — читайте дальше, чтобы узнать!

ⓘ Я включил zip-файл со всем исходным кодом примеров в начале этого руководства, поэтому вам не нужно копировать и вставлять все… Или если вы просто хотите сразу погрузиться.

БЫСТРЫЕ ГОРКИ

СОДЕРЖАНИЕ

Загрузка и примечания	Ссылки на кнопки	Полезные биты и ссылки
Конец

СКАЧАТЬ И ПРИМЕЧАНИЯ

Во-первых, вот ссылка для скачивания кода примера, как и было обещано.

БЫСТРЫЕ ЗАМЕЧАНИЯ

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

ЗАГРУЗИТЬ ПРИМЕР КОДА

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

МЕТОД 1) JAVASCRIPT REDIRECT

 <кнопка>
  НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ПОЛУЧИТЬ ДОСТУП К КОДУ X

Самый простой способ создать ссылку-кнопку — это, вероятно, обработать ее с помощью небольшого количества Javascript.

Свойство onclick используется для указания того, что делать при нажатии кнопки.

location = 'URL' установит, куда будет перенаправляться при нажатии кнопки.

П.С. Вы заметите, что в некоторых других учебниках вместо используется location.href = 'URL' . В этом нет ничего плохого, и это «старомодный» способ перенаправления. Оба по-прежнему будут работать, location является синонимом location.href .

МЕТОД 2) ОТПРАВИТЬ ФОРМУ

Кто сказал, что мы не можем творчески использовать формы? Вышеприведенное отправит пустую форму, которая действует точно так же, как ссылка. Пара коротких заметок для абсолютных новичков:

Измените action="URL" , чтобы перенаправить пользователя туда, куда вы хотите.
Мы также можем добавить target="_blank" для открытия в новой вкладке. В противном случае, если он не определен, по умолчанию он будет иметь значение target="_self" и откроется в том же окне.
Обратите внимание, что здесь мы используем вместо — Submit будет обрабатывать форму при нажатии, а кнопка — нет.

МЕТОД 3) ДЕЙСТВИЕ ФОРМЫ

formaction — это свойство, добавленное в HTML5, и оно фактически используется для отправки формы на альтернативный URL-адрес. В случае «кнопки для ссылки» мы можем использовать ее для удобства создания нескольких ссылок в одной форме.

Штирлиц — Сеть печатных салонов в Перми