Сделать кнопку html: Как добавить HTML-кнопку на сайт

04.01.2023 alexxlab

Содержание

Создать кнопку HTML, работающую как ссылку

Используйте теги привязки <form> и <a> </a> для создания кнопки HTML, которая действует как ссылка
Используйте теги <form> и <button> для создания кнопки HTML, которая действует как ссылка
Используйте теги <form> и <input> для создания кнопки HTML, которая действует как ссылка

В этой статье будут представлены три различных метода создания кнопки HTML, которая работает как ссылка. Мы будем использовать HTML-форму, кнопку, теги ввода и привязки для демонстрации.

Используйте теги привязки

<form> и <a> </a> для создания кнопки HTML, которая действует как ссылка

Мы можем использовать теги <form> и <a></a>, чтобы создать кнопку HTML и заставить ее вести себя как веб-ссылка. Мы используем тег <form> внутри тела HTML. А внутри тега <form> мы используем тег привязки <a>. Тег <a> определяет гиперссылку, используемую для перехода с одной страницы на другую. Мы можем указать целевой адрес для загрузки в атрибуте href тега привязки. При отсутствии атрибута href тег <a> является только заполнителем для ссылки.

Например, напишите тег <form> внутри тела HTML. Затем напишите тег привязки <a> и укажите URL https://www.facebook.com/ в атрибуте href тега привязки. Затем создайте тег <input> и укажите для кнопки атрибут type. Напишите значение click here

в атрибуте value. Затем закройте тег привязки, а затем тег формы.

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

Пример кода:

<html>
<body>
<form>
    <a href="https://www.facebook.com/">
        <input type="button" value="click here">
    </a>
</form>
</body>
</html>

Используйте теги

<form> и <button> для создания кнопки HTML, которая действует как ссылка

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

действие является целевым назначением при отправке формы. Тег button создает кнопку, и когда мы нажимаем на нее, он переводит нас на целевой URL, который мы объявили в атрибуте action.

Например, напишите тег <form> внутри тела HTML. Затем напишите атрибут action и укажите значение в виде URL https://www.youtube.com/. После этого создайте тег button и напишите submit в качестве значения атрибута type. Затем перед закрытием тега Continue напишите текст button. Затем закройте тег

form.

На иллюстрации ниже создается кнопка HTML. Когда мы нажимаем кнопку, веб-страница перенаправляется на YouTube. Тег button мы использовали непосредственно в этом методе, в отличие от первого метода. Таким же образом мы можем сделать кнопку HTML, которая действует как ссылка.

Пример кода:

<html>
<body>
    <form action="https://www.youtube.com/">
        <button type="submit">Continue</button>
    </form>
</body>
</html>

Используйте теги

<form> и <input> для создания кнопки HTML, которая действует как ссылка

Как и на втором шаге, мы снова можем использовать форму для создания кнопки HTML, которая действует как ссылка в этом методе. Однако мы будем использовать тег

<input> для создания кнопки отправки. Мы можем указать URL-адрес, на который будет перенаправляться страница после отправки формы, в атрибуте action.

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

Например, напишите тег <form> внутри тела HTML. Затем напишите атрибут action и укажите URL https://google.com/. После этого напишите тег input и запишите значение submit в атрибуте

type. В атрибуте value , напишите "Go to Google" и закройте тег <form>.

На иллюстрации ниже также создается кнопка HTML. Когда мы нажимаем кнопку, веб-страница перенаправляется в Google. Обратите внимание, что мы не написали открывающий и закрывающий теги для <input>, потому что это самозакрывающийся тег. Таким же образом мы можем создать кнопку HTML, которая действует как ссылка.

Пример кода:

<html>
<body>
    <form action="https://google.com">
        <input type="submit" value="Go to Google" />
    </form>
</body>
</html>

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа! —

Доброго времени суток! Каждый веб мастер задавался вопросом как же сделать кнопку по клику на которую человек сразу перейдет по нужному адресу. Простая ссылка «a href=»адрес»>Ссылка» выглядит не красиво, и не всегда подходит по дизайну вашего сайта. Так же иногда возникает необходимость сделать обратное. Из обычной кнопки, сделать аналог ссылки, по клику на которой будет происходить переход по нужному адресу.

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

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

Первый способ

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

CSS.

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

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом ««!

<a href="you-hands.ru"><img src="button.png"></a>

Правда, теперь, если вы захотите сменить текст, вам придется нарисовать кнопку заново. Плюс, такая кнопка занимает больше места, трафика и времени загрузки страницы. Такой способ можно использовать для создания сложных кнопок, таких, которые невозможно сделать стилями CSS.

Третий способ

Этот способ практический такой же как и первый, за исключением того, что в первом методе мы использовали стили кнопок «по умолчанию«, сейчас же мы нарисуем свою кнопку «с блэк джеком и контуром!«.

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

Выглядеть такая ссылка будет как вам захочется.

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

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

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

Первый способ

Для того что-бы кнопка вела себя как ссылка, можно создать для нее форму, а внутри разместить одну лишь кнопку.

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

Второй способ

Тут мы уже задействуем магию JavaScript! Для этого, создадим функцию, которая будет перенаправлять пользователя куда нам нужно.

И сделаем это так, чтоб можно было использовать эту функцию быстро и удобно в будущем.

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

<button type="submit">Кнопка как ссылка 2</button>

Третий способ

Этот способ очень похож на второй, однако используется немного по другому. Отдельный JS код нам не понадобиться

<button type="submit">Кнопка как ссылка 3</button>

Итоги

Как и всегда, несколько способов делают почти одно и тоже. Каким будите пользоваться именно вы, решать вам. Если остались какие-то вопросы, можно задать их в комментариях на сайте. Удачи!

4.17/5 (12)

Оцените

Рейтинг

Как создать кнопки электронной почты, используя только HTML и CSS

Как создать кнопки электронной почты только с помощью HTML и CSS
Кнопка призыва к действию — важный элемент эффективного электронного письма.
Но как мы можем убедиться, что все получат кнопку именно так, как вы хотите?
Люди склонны использовать изображения, ошибка новичка, потому что люди могут отключить свои изображения. Поэтому мы создадим отзывчивую кнопку электронной почты, используя только HTML и CSS.
Каждый клиент обрабатывает HTML и CSS по-разному, но мы по-прежнему хотим, чтобы он делал то же самое в каждом клиенте. При создании HTML-кнопки для электронной почты возникают две основные проблемы.
Гибкость
Кликабельность
В большинстве случаев, когда люди создают кнопку, они используют либо границу, либо отступ. Хотя кнопка, созданная с рамкой, очень гибкая (размеры указывать не нужно) и нажимается вся кнопка, она не работает в Outlook. Кнопка, созданная с отступом, работает в Outlook, но кликать можно только по тексту.

Однако мы можем комбинировать отступы и рамку, чтобы создать кнопку, которая никогда не перестанет работать.
HTML
Сначала мы создадим таблицу-оболочку с реальной таблицей кнопок внутри нее. Обертка создается, чтобы убедиться, что кнопка остается на месте. В таблице кнопок мы создаем ячейку, которой мы должны задать цвет фона.
<тд> <таблица ячеекспейсинг="0" ячейкападдинг="0">

Нажмите
CSS
Теперь мы можем применить отступы и границу к самой ссылке, чтобы убедиться, что вся кнопка активна. Стиль отображения должен быть встроенным блоком, чтобы горизонтальные отступы работали.
.кнопка { радиус границы: 2px; } .кнопка { отступ: 8px 12px; граница: 1px сплошная #ED2939; радиус границы: 2px; семейство шрифтов: Helvetica, Arial, без засечек; размер шрифта: 14px; цвет: #ffffff; текстовое оформление: нет; вес шрифта: полужирный; отображение: встроенный блок; }

Встроенный
Если вы не хотите работать с классами в своих электронных письмах, вы, конечно, можете использовать встроенный стиль.
<тд> <таблица ячеекспейсинг="0" ячейкападдинг="0"> Нажмите
Почему важно присвоить HTML-кнопке тип
Спойлер
Кнопка без атрибута type действует как type="submit" и будет пытаться отправить данные формы при нажатии. Будьте ясны в своих намерениях и добры к будущим разработчикам, работающим с вашим кодом: предоставьте тип. Указав кнопку , submit или reset , цель кода становится понятной и ее легче поддерживать
Основы кнопок
Как создать элемент кнопки с помощью HTML? Я часто вижу их написанными так:

Войти в полноэкранный режимВыйти из полноэкранного режима
Этот код является допустимым кодом HTML и проходит службу проверки разметки W3C. Однако я считаю, что атрибут типа всегда должен быть включен в кнопку. Если этот атрибут отсутствует, это может привести к потенциально запутанному поведению — и этого достаточно, чтобы иметь дело с веб-разработкой!
Примечание : я использую тег Войти в полноэкранный режимВыйти из полноэкранного режима
Эта кнопка отправит данные формы. Кнопки отправки обычно находятся внутри формы, т.е.0043 Тег <форма> .
«кнопка»

Войти в полноэкранный режимВыйти из полноэкранного режима
Эта кнопка не работает по умолчанию. JavaScript должен использоваться для определения того, что происходит при нажатии на него.
«перезагрузить»

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

Войти в полноэкранный режимВыйти из полноэкранного режима
После прочтения предыдущих определений, как вы думаете, как будет вести себя кнопка без атрибута типа? Если атрибут type отсутствует, кнопка ведет себя как кнопка отправки .
Это определенно было не то, что я ожидал — я предполагал, что кнопка без определенного типа ничего не сделает при нажатии. Это может вызвать проблемное поведение (то есть ошибки!) в вашем коде, если, как и я, вы этого не ожидаете.
Типы кнопок в действии
На следующем рисунке показана простая форма (оригинал Codepen ниже). Когда форма отправляется, цвет фона страницы изменяется с помощью JavaScript, прослушивая событие onsubmit . Каждый из упомянутых ранее типов кнопок включен в форму и помечен, чтобы показать значение их типа. Обратите внимание, что происходит при нажатии каждого из них:
Кнопка типа отправки меняет цвет фона и отправляет форму, как и ожидалось.
Кнопка-кнопка, как и ожидалось, ничего не делает.
Кнопка сброса ничего не делает, так как в этом примере нет ввода формы для сброса. Это также ожидается.
Кнопка без явного значения типа отправляет форму и меняет цвет фона. Мы ожидаем этого после обсуждения выше, но это все еще не кажется интуитивно понятным по сравнению с другими типами кнопок.
Попробуйте поэкспериментировать с CodePen здесь:
Почему вы всегда должны объявлять атрибут типа?
1) Четкое определение того, что делает кнопка
Если у кнопки нет атрибута типа, ее использование неясно. При написании кода вам может быть очевидно, что кнопка отправляет форму. Но частью того, чтобы быть хорошим разработчиком программного обеспечения, является написание кода, который легко поддерживать и понимать для других. Добавив атрибут type, будущие разработчики или даже Future You можно быстро и легко определить назначение кнопки.
2) Избегайте ошибок
«Почему эта форма отправляется, когда я нажимаю эту несвязанную кнопку?» Следуйте этому совету, и вы и все, кто работает с вашим кодом, больше никогда не столкнется с этой ошибкой:
Для любой кнопки, которая не отправляет или не сбрасывает данные формы, добавьте атрибут типа button .