Кнопка со ссылкой html: Ссылка как кнопка

Содержание

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

Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Добавьте строчный

onclick event¶

к HTML <button> тегу внутри элемента HTML <form>.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <button>Click Here</button>
  </body>
</html>

Попробуйте сами!

Этот пример может не работать, если кнопка находится внутри тега <form>.

к <input> тегу внутри элемента HTML <form>.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <input type="button" value="w3docs"/>
    </form>
  </body>
</html>

Попробуйте сами!

Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

Используйте атрибут action или formaction внутри элемента <form>.¶

атрибут action

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/" method="get" target="_blank">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

б. атрибут HTML5 formaction.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://www.w3docs.com">Click me</button>
    </form>
  </body>
</html>

Попробуйте сами!

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)¶

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .button {
      background-color: #FF4500;
      border: none;
      color: white;
      padding: 20px 34px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/">Click Here</a>
  </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.94/5 (8)
Ссылки против кнопок в современных веб-приложениях — CSS-LIVE
Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Github: ссылки или кнопки?
Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.
Кнопки
Почему-то люди становятся веб-разработчиками,так и не узнав про HTML-элемент <button>. (Мне и самой потребовалось несколько лет, пока я узнала, для чего нужны заголовки h2-h6, так что бывает). Могучая кнопка и правда крутая. Вот что она может делать:

Получать фокус с клавиатуры по умолчанию
Делать «клик» по нажатию на пробел
Отправлять данные формы на сервер
Очищать форму
Блокироваться с помощью атрибута disabled
Давать подсказку скринридеру с помощью неявного атрибута role="button"
Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled
Если добавить немного скрипта,кнопка идеальный элемент для:
Открывания модального окна
Вызова всплывающего меню
Переключения интерфейса
Проигрывания медиа-контента
Вставки с помощью JS в случае, если они работают только с помощью JS
Ссылки
Вот несколько базовых возможностей ссылок, или якорей, или фундамента веба:
Создавать гипертекст, сеть онлайн-ресурсов

Перевести пользователя на новую страницу или окно
Изменять URL
Вызвать браузерные перерисовку/перезагрузку
Переходить по якорям внутри страницы
Связывать между собой разные части приложения с отрисовкой на клиенте
Способны принимать фокус по умолчанию с помощью атрибута href
Регистрируют клик с помощью клавиши Enter
Имеют неявную роль link
Не блокируются как кнопки, но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true"
Могут открываться в новых окнах (а раньше — и во фреймах)
Показывать состояния ∶link, ∶visited, ∶focus, ∶hover, ∶active
Лично для меня самое главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственная загвоздка здесь). Кнопка переключает что-то в интерфейсе, например, видео-плеер, или вызывает новый контент в том же самом контексте, например, всплывающее меню, использующее
aria-haspopup.
Что такое навигация? А что маршрутизация?
Изменение URL означает, что пользователь переходит на новую страницу. Это перезагружает браузер с новым ресурсом и перерисовывает пиксели. Навигация может вызываться с помощью действий формы, якорных ссылок и JavaScript-свойства location.
Подобно сортировке писем на почте, маршрутизация — механизм для подключения сетевых запросов с соответствующим контентом в приложении. Маршрутизаторы — общая технология для множества разных веб-фреймворков (помню, как на заре своей карьеры я балдела от PHPшных), ставящая в соответствие представления и их части определенным фрагментам URL. Благодаря написанию динамических маршрутов, новый контент можно создавать динамически (без хардкода)
Откуда возникает путаница?
В мире клиентских веб-приложений построенных с помощью Angular, Ember или React, браузерная перерисовка может вызваться в любой момент. Немного неясно, какой элемент лучше подходит для дела, когда вы можете выполнять тот же код, что для маршрута, но с обработчиком клика кнопки и без изменения URL. К примеру, если я открываю панель над существующим контентом страницы, я перехожу сюда или переключаю интерфейс? Зависит ли это от того, есть ли у этой панели свой собственный URL? Вот код, который я видела недавно:

<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>
По первому впечатлению я посчитала, что это надо заменить на элемент button, поскольку нет значения в href, но есть tabindex="0" и привязка обработчика ng-click. Выглядит очевидно, да? Мне сказали, что он должен оставаться якорем, поскольку «он перенаправляет на внешние ссылки и страницу профиля». Это стало ясно только после изучения JavaScript-кода, который вызывается во многих подобных местах по привязке обработчика
ng-click на элементе button. Неужели обязательно надо так глубоко копать, чтобы помочь выбрать правильный элемент?
Если в чисто клиентском приложении фокус обрабатывается правильно, это может не сказаться на пользователе — у ссылки ng-click и tabindex останется по-прежнему неявная роль ссылки. Однако,при декларативном подходе намного лучше было бы использовать заполненный href и маршрутизацию, если якорь перенаправляет пользователя на новый ресурс. Tabindex и события click, привязанные к тегу ссылки — антипатерн разметки, который еще аукнется тем, кто позднее будет писать код и проверять его.
Если делать маршрутизацию основной частью веб-приложения, то веб-разработчикам будет намного проще использовать ссылки и понять предназначение кнопок. А еще с ним проще создавать серверные JavaScript-приложения с прогрессивным улучшением, пользуясь шаблонами URL, а не полагаясь на события по клику.
Роль UX в разработке доступных приложений
Я скажу это вслух: эта путаница часто начинается с дизайна и UX. Компонент дизайна приходит к нам с прямоугольными кнопками интерфейса, и — потому что так надо — в коде они должны быть ссылками. Где это становится проблемой?
Если пользователь скринридера обратится в техподдержку и получит инструкцию «кликнуть на кнопку» в вашем UI, которая на самом деле написана в коде как ссылка, для него может оказаться проблемой найти ее. Не забывайте и о голосовых интерфейсах: если вы произнесёте команду кликнуть на кнопку, которая в коде похожа на ссылку, вы столкнетесь с проблемами, нет?
Фреймворки, по общему признанию, стирают эту грань и только способствуют выбору неправильного элемента, как в примере с ng-click выше. Можно использовать JavaScript для запуска асинхронной отправки формы на нужном нам элементе (даже без тега <form>, но это еще не повод от него отказываться). Аналогично, можно инициировать изменения представления без маршрутизации, даже если их лучше всего обрабатывать с помощью ссылки. Одни элементы подходят в одном случае, другие — в другом: всё дело в том, чтобы использовать нативные возможности этого элемента по максимуму.
Заметили разницу?
Что можно для этого сделать?
Вернитесь к дизайну и сделайте ссылки похожими на ссылки, а кнопки — на кнопки. Без двусмысленности разработчикам станет легче писать более доступный код, лучше отвечающий ожиданиям пользователей. (Можно ли кликнуть правой кнопкой мыши на эту квадратную кнопку, чтобы открыть в новом окне?)
В разработке:
Если пользователь скринридера перейдет табом на интерактивный элемент, подскажет ли роль этого элемента, чего от него ждать? (Уводит ли он куда-то с текущей страницы? Об этом хорошо бы узнать заранее.)
Отключаете ссылочные фичи типа смены URL или правого клика? Подумайте о кнопке.
Поддерживайте маршрутизацию в вашем приложении с помощью href, ng-href, и так далее.
Навигация по страницам заслуживает изменения заголовка и истории.
Это ещё не конец.
Уверена, что к этой теме придется вечно возвращаться снова и снова, как и все эти годы. Воплощая интерфейс в коде, вам каждый раз придется с трудом выбирать, какой элемент правильный в данном случае… и есть уйма способов сделать одно и то же. И если при этом вы принимаете компетентные решения, то это лучшее, что в ваших силах.
Разработчики, которым предстоит работать с кодом после вас, благодаря декларативности смогут легче освоить эту науку. И самое главное, подумайте об ожиданиях ваших пользователей от взаимодействия, а не бросайтесь с дизайном интерфейса в крайности. Когда интерфейс интуитивно понятен, он меньше напрягает, и пользователи остаются довольны.
P.S. Это тоже может быть интересно:
Как сделать кнопку в html с ссылкой

Делаем кнопку input ссылкой
01 авг
HTML-тег input предназначен для вывода разных полей и кнопок. Благодаря ему можно создавать элементы сайта, которые будут требовать от пользователя каких-то действий.
Но оказывается, созданная с помощью input, кнопка не предназначена для использования в качестве обычной ссылки. Но некоторые случаи требует от вебмастера использования html-тега input именно в качестве ссылки.
Оказывается исправить это вопиющие безобразием можно и к тому же не одним способом.
Я понятия не имею почему в HTML для такого простого действия приходится делать столько лишних телодвижений, и почему нет какого-нибудь специализированного параметра у этого тега. Но кто знает способ проще или где пройти курсы электриков подешевле, прошу в комменты.
Самый надежный способ из всех – это использование чистого HTML без JS (Способ №1), так как ваш посетитель может использовать браузер с отключенным JavaScript или пользоваться каким-нибудь мобильным браузером, начисто лишенным понимания скриптов.
Способ №1 – чистый HTML: Выглядит это так:
Этот способ открывает ссылку в этом же окне. Как сделать, чтобы все открывалось в новой странице, я не знаю и поэтому привел Способ №2
Способ №2 – с использованием JS: Работает это так:
В общем то внешних отличий мало, отличия только внутренние. Использование этого метода создания из input`а ссылки, я бы не рекомендовал, так как некоторые ваши посетители могут столкнутся с проблемой неработоспособности таких ссылок.
Не смотря на это у этого способа есть один существенный плюс: можно открыть ссылку в новой странице браузера. Для этого нужно немного видоизменить код:
Эти 2 нехитрые способа помогут использовать вам обычную HTML-кнопку в качестве ссылки. Я, честно, не знаю как такая ссылка будет передавать вес, но перенаправлять пользователей будет как надо.
Комментарии:
Как сделать кнопку на сайте ссылкой.
Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.
Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов — это создать кнопку в Photoshop и разместить её на сайте.
Кнопка, созданная в каком либо графическом редакторе, например Photoshop — это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.
1. Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.
Второй важный момент — это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта http://www.seoklub.ru/
2. http://www.seoklub.ru/Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg).
3.
Теперь сделаем относительную ссылку (относительная ссылка — это ссылка работающая в пределах одного сайта).
4.
Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!
На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.
Есть вот такой интересный сервис — dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.
Удобно то, что в процессе создания кнопочки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.
Первое поле TEXT — вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.
Выбираем шрифт Font. Выбираем Sans — serif, Bold — Жирный, Italic — курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.
Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.
Color — цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.
Text Shadow — тень у текста. Distance — расстояние от текста до тени, Color — цвет тени. Пробуйте. Вы будете видеть результат.
Output type — Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.
Переходим к правой части экрана. Button Type — возможные варианты — круглая, квадратная и с закругленными углами. Я оставила круглую.
Background — фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент — перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.
Border — граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.
Shadow — тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.
Size — размер кнопки. Variable — варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed — фиксированный размер (то есть независимо от длинны текста). И задаю ширину — 150 и высоту 50.
Теперь Вам нужно сохранить вашу кнопочку на вашем компьютере. Для этого кликаем по ней. Выскакивает окошко сохранения файла button.jpeg. Дальше Вы уже знаете, что с ней делать — разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта.
Как сделать кнопку в html
Создание кнопок в HTML осуществляется при помощи тегов и . Они являются неотъемлемой частью практически любого интерфейса и помогают отправлять необходимую информацию скрипту-обработчику или очищать уже заполненные формы.
Инструкция
Использование дескриптора добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:
Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.
Дескриптор создает аналогичный элемент, однако предлагает для использования множество дополнительных параметров, которые могут понадобиться веб-разработчику. Так, поверх можно наложить таблицу или изображение, форматированный текст или список. Например:
Текст
Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и жирный текст. Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:
Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.
Обратите внимание
Дескриптор должен обязательно использоваться в качестве содержимого тега . Кнопка может быть отображена и вне формы, однако для обработки данных и выполнения определенного действия она также должна быть заключена между .
Распечатать
Как сделать кнопку в html
Ссылки и кнопки — сходства и различия
Неопытному пользователю или разработчику может показаться, что ссылка и кнопка мало чем отличается, что на самом деле является заблуждением. Да, современные подходы к внешнему виду кнопок и ссылок стёрли визуальную границу между этими элементами, но реакция браузеров на ссылки и кнопки всё ещё различна. Неверное использование элементов может привести к потере удобства, которое уже заложено на уровне браузеров.
Проблематика
Современный подход к дизайну веб-интерфейсов, зачастую основанный на концепции одновременной адаптации под классические компьютеры и пальцеориентированные (тачскрин) устройства, привёл к тому, что чисто визуально ссылку на плашке путают с кнопкой.
Кнопку и ссылку можно сделать абсолютно одинаковыми внешне и, возможно даже, интерфейс от этого не пострадает, но общая эргономика точно нарушится.
Второй момент — возможность повесить на ссылку выполнение javascript привело к тому, что ссылки зачастую и используют как альтернативу кнопкам, что неверно.
При выборе типа элемента необходимо отталкиваться от определения сущности элементов:
Кнопка (html тег <button> ) — это функциональный элемент, то есть элемент, отвечающий за выполнение определённой функции.
Ссылка (html тег <a> ) — это элемент навигации, то есть элемент, отвечающий за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.
Ссылка-кнопка: что будет, если ссылку сделать функциональным элементом?
Ссылке можно задать javascript, который она должна выполнить, то есть из ссылки ( <a> ) при желании можно сделать функциональный элемент — кнопку.
Такая ссылка-кнопка не будет иметь корректного URL-адреса, поэтому при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#».
Браузер обработает ссылку-кнопку как ссылку и при правом клике предложит сохранить ссылку или поделиться ею, что, конечно, не имеет смысла, так как ссылка-кнопка не имеет корректного адреса.
У ссылки нет штатного состояния disabled (заблокирована), характерного для кнопок и отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят кнопку в активное состояние.
Думаю, что и поисковые системы не очень хорошо относятся к ссылкам-кнопкам —в любом случае полезной ссылочной массы они не рождают.
Кнопка-ссылка: что будет, если кнопку сделать навигационным элементом?
Кнопке можно передавать URL-адрес, то есть сделать из кнопки ( <button> ) ссылку.
Кнопка-ссылка не отобразит URL адрес при наведении на неё курсора мыши.
Кнопка-ссылка не позволит сохранить URL-адрес через контекстное меню.
Кнопка-ссылка не позволит открыть себя в новой вкладке (к примеру, зажав ctrl+левая кнопка мыши).
Правый клик мыши в браузере по ссылке и кнопке
Кнопка или ссылка — решающие правила
Навигация между страницами — ссылка.
Навигация по якорям — ссылка.
Вызов всплывающего окна — чаще кнопка (ссылка, если дублировать всплывающее окно страницей, см. пример далее).
Функция управления, не имеющая своего URL-адреса, — кнопка.
Для примера рассмотрим функцию вызова окна входа на трёх сервисах совместных поездок: beepcar.ru, едем.рф и blablacar.ru.
beepcar.ru — правильно
Функция входа сделана в виде кнопки (хотя внешне похоже на ссылку), которая открывает на этой же странице окно для ввода регистрационных данных.
Кнопка «Войти» в beepcar.ru
едем.рф — неправильно
Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом все прелести ссылки упущены.
Кнопка «Войти» в едем.рф
blablacar.ru — правильно+
Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом у blablacar.ru есть и отдельная страница для входа, ссылка на которую и представлена по ссылке «Войти», то есть остались все прелести ссылки.
Кнопка «Войти» в blablacar.ru
Оформление ссылок и кнопок
Как показывает практика и кнопки, и ссылки могут иметь абсолютно одинаковое оформление (см. выше на примере кнопки и ссылки «Войти»). Всё чаще в навигации ссылки становятся похожи на кнопки за счёт использования плашек-подложек (и так лучше для навигации), в каноническом виде ссылки используются по ходу текста.
По большому счёту в оформлении ссылок и кнопок важно придерживаться лишь одного правила — оформление должно быть однотипным по всему проекту. При этом во фронт-части проекта внешний вид элементов может быть довольно далёк от канонического, но в разделе управления информацией (бэкэнд) я рекомендую придерживаться внешнего вида, близкого к каноническому (так удобнее для пользователей).
Есть классические кнопки, которые на формах ввода и поиска я рекомендую чаще оформлять как кнопки: Сохранить, Удалить, Найти.
Классические кнопки для бэкэнда
Некоторые полезные советы по оформлению и использованию ссылок и кнопок можно найти в Контур.Гайды (от СКБ Контур): Ссылка, Кнопка
Наложения гиперссылок и кнопок
В выпуске версии 30 были представлены новые относительные параметры для навигации по статьям и страницам. Обратите внимание, что относительные форматы navto поддерживаются только в приложениях версии 30 или более поздней, но можно использовать любой формат фолио (версии 20 или более поздней). Относительные ссылки navto поддерживаются в средствах просмотра для iOS, Android и Магазина Windows, но не поддерживаются в средствах просмотра для настольных ПК и веб-приложениях для просмотра.
Можно использовать различные форматы navto://relative для перехода к следующей, предыдущей, первой или последней статье, а также для сброса фолио. Например, кнопка с действием navto://relative/first позволяет перейти к первой статье в фолио. Допустимые форматы: first, last, next, previous, current и reset. Можно также перейти к определенной статье относительно ее положения в фолио, например к пятой статье.
Пример: navto://relative/last (переход к последней статье в фолио)
Пример: navto://relative/last#last (переход на последнюю страницу последней статьи в фолио)
Пример: navto://relative/4 (переход к пятой статье в фолио)
Пример: navto://relative/4#2 (переход к третьей странице пятой статьи в фолио)
Использование формата current особенно полезно для навигации по страницам. Можно использовать #previous, #next, #first, #last для выполнения перехода на определенную страницу, например используйте #3, чтобы перейти к странице 4 статьи.
Пример: navto://relative/current#previous (переход к предыдущей странице статьи)
Пример: navto://relative/current#last (переход на последнюю страницу статьи)
Пример: navto://relative/current#3 (переход к четвертой странице текущей статьи)
Используйте формат navto для создания кнопки, которая осуществляет сброс фолио.
Пример: navto://relative/reset (переход к первой статье и очистка всех положений чтения)
В статьях с плавной прокруткой можно использовать десятичные дроби или проценты для перехода в конкретное место.
Пример: navto://myarticle#3.3 (переход к определенному месту статьи с плавной прокруткой, который отображает нижнюю часть страницы 4 и верхнюю часть страницы 5)
Пример: navto://myarticle#50% (переход к середине статьи с плавной прокруткой)
Чтобы расширить эти возможности относительной навигации navto, можно создать наложение «Веб-содержимое» или статью HTML, которые имеют доступ к Reading API. Например, можно запрашивать фолио для определения такой информации, как количество статей в фолио и количество страниц в статье. Затем можно отобразить эту информацию или использовать ее другим способом в наложении или статье HTML. Дополнительные сведения см. в разделе Новые API-интерфейсы и функции в выпуске версии 30 в центре разработчиков DPS.
Как сделать кнопку-ссылку на сайт в Telegram-канале с помощью бота
После создания канала в Telegram не стоит ограничиваться стандартными возможностями платформы. Оформляйте публикации эффектно, удобно для читателей – пользуйте для этого сторонними ботами, позволяющими реализовать необходимый функционал. Один из вариантов – кнопки-ссылки, голосования-реакции. Посмотреть, как это выглядит можно в нашем Телеграм-канале – t.me/postiumru.
В этой статье мы расскажем, как с помощью настройки двух ботов в несколько нажатий добавлять к записям кнопки с ссылкой на сайт и реакции.
Получайте до 18% от расходов на контекст и таргет!
Рекомендуем: Click.ru – маркетплейс рекламных платформ:
Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.

Подключиться можно самому за 1 день.

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

Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.

У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

Попробовать бесплатно >> Реклама
Как добавлять кнопки в Телеграм-канале
Добавление кнопок в Telegram-каналах осуществляется через двух ботов. С помощью первого – @ControllerBot – осуществляется создание постов через браузер и из интерфейса мобильного/компьютерного приложения, добавление канала и отслеживание статистики. С помощью второго – @BotFather – создание бота для постинга. Добавление кнопок и реакцией в Telegram-каналах – дело двух минут и ниже мы познакомим вас с процессом.
Создаём бота для канала: пошаговая инструкция
В поиск с компьютерной или мобильной версии мессенджера пишем название бота «@ControllerBot».
Добавляем его в контакты и кликаем по кнопке «Начать», если ранее не пользовались им либо «Перезапустить».
Выбираем команду «/addchanel» для добавления нового канала или вводим её вручную.
Кликаем по кнопке «Подключить новый бот».
Переходим согласно инструкции внутри @ControllerBot в бот @BotFather для создания нового бота.
Нажимаем кнопку «Начать».
Среди предложенных команд нажимаем «/newbot» либо вводим её самостоятельно в поле для ввода сообщений и отправляем нажатием кнопки «Enter».
Задаем имя новому боту в @BotFather, отправив ответное сообщение. Например, PostiumPost_Bot (нижнее подчеркивание перед «bot» обязательно).
Сообщение о завершении создания перешлите в @ControllerBot. Нажмите для этого правую кнопку мыши на тексте сообщения и в контекстном меню выбираем пункт «Переслать сообщение», затем ищем в диалогах @BotController и направляем текст ему. Для пересылки сообщения с телефона нажимаем на сообщение и удерживаем палец до появления контекстного меню, где выбираем «Переслать».
Отлично. Половина работы успешно проделана, далее – настройка созданного бота.
Настраиваем бота
Через @ControllerBot нужно выполнить предварительную настройку созданного бота:
Копируем название созданного бота.
Нажимаем на вертикальное троеточие в собственном канале и в выпадающем меню нажимаем на пункт «Управление каналом».
Кликаем по пункту «Администраторы» и в новом окне нужно нажать на кнопку добавления администраторов.
Вставляем ранее скопированное имя созданного бота в строку поиска, выбираем его среди результатов. Подтверждаем назначение пользователя (бота) в качестве администратора канала нажатием кнопки «ОК». Он будет автоматически приглашен в канал и назначен администратором.
Задаем права как на изображении ниже и сохраняем результат.
Напишите сообщение на канал или перешлите в @ControllerBot любое ранее опубликованное. На смартфоне удерживайте палец на сообщении и в появившемся контекстном меню выберите «Переслать». На компьютере кликните по сообщению правой кнопкой и выберите аналогичный пункт.
Настраиваем тайм-зону (часовой пояс канала), отправив название города в ответном сообщении. Например, Москва. Нажимаем кнопку «Верно», чтобы подтвердить выбор города.
Готово! Все настройки завершены.
Как сделать пост с url-кнопкой и реакциями в Telegram
Сложности позади, осталось понять логику создания красивых публикаций через нашего бота:
Переходим в ранее созданного бота. В нашем случае, это @PostiumPost_Bot. Нажимаем «Enter» или кнопку, показанную на скриншоте.
Кликаем на кнопку «Создать пост» и выбираем канал, в котором будет опубликовано сообщение.
Отправляем желаемый контент в следующем порядке: текст, изображение, реакции, URL-кнопки.
Загружаем изображение нажатием кнопки «Прикрепить медиафайл» и выбираем интересующее фото на ПК или смартфоне. Картинка прикрепится автоматически.
Добавляем реакции на статью под изображением. Нажимаем для этого «Добавить реакции» и присылаем эмодзи согласно рекомендациям в боте Телеграм. Разделитель смайликов – «/». В строку можно публиковать до трех реакций. Рядом со смайликом можно написать текст.
Нажимаем кнопку «Добавить URL-кнопки». Следуя рекомендациям от бота, одну или несколько кнопок. В ряд могут быть добавлены не более 3 кнопок. Между собой они разделяются с помощью «|», и имеют вид «Кнопка – https://site.com/». Нажимаем «Отправить».
Кликаем по кнопке «Далее» для перехода к настройкам публикации подготовленного сообщения.
Выбираем функции – «Таймер удаление» (сообщение будет автоматически удалено с канала через заданное время), «Опубликовать» — размещение поста прямо сейчас, «Отложить» — настройка даты и времени публикации. Нажимаем «Опубликовать» и подтверждаем публикацию сообщения.
Готово! Пост опубликован с реакциями, ссылками на сайт в виде кнопок и изображением.
Процесс создания бота, публикации сообщений с реакциями и кнопками-ссылками со смартфонов аналогичен.
Полезные ссылки:
css — Как сделать HTML-ссылку похожей на кнопку?
Сильно запоздалый ответ:
Я боролся с этим время от времени с тех пор, как впервые начал работать в ASP. Вот лучшее, что я придумал:
Концепция
: я создаю настраиваемый элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает для document.location желаемое значение с помощью JavaScript.
Я назвал элемент управления ButtonLink, чтобы меня легко запутать с LinkButton.
aspx:
<% @ Control Language = "VB" AutoEventWireup = "false" CodeFile = "ButtonLink.ascx.vb" Inherits = "controls_ButtonLink"%>
код позади:
Элементы управления частичным классом_ButtonLink Наследует System.Web.UI.UserControl Dim _url как строка Dim _confirm As String Публичное свойство NavigateUrl как строка Получать Возврат _url Конец получить Установить (значение как строка) _url = значение BuildJs () Конец набора Конечная собственность Публичное свойство подтверждается как строка Получать Возврат _confirm Конец получить Установить (значение как строка) _confirm = значение BuildJs () Конец набора Конечная собственность Текст общедоступного свойства в виде строки Получать Кнопка возврата.Текст Конец получить Установить (значение как строка) button.Text = значение Конец набора Конечная собственность Общедоступное свойство включено как логическое Получать Кнопка возврата. Конец получить Установить (значение как логическое) button.Enabled = значение Конец набора Конечная собственность Публичное свойство CssClass как строка Получать Кнопка возврата. Конец получить Установить (значение как строка) button.CssClass = значение Конец набора Конечная собственность Sub BuildJs () Это небольшая путаница в том смысле, что, если пользователь дает URL-адрес и подтверждающее сообщение, мы дважды создадим строку onclick.«Но это не так уж важно. Если String.IsNullOrEmpty (_url) Тогда button.OnClientClick = Ничего ElseIf String.IsNullOrEmpty (_confirm) Тогда button.OnClientClick = String.Format ("document.location = '{0}'; return false;", ResolveClientUrl (_url)) Еще button.OnClientClick = String.Format ("if (confirm ('{0}')) {{document.location = '{1}';}} return false;", _confirm, ResolveClientUrl (_url)) Конец, если Конец подписки Конец класса
Достоинства схемы: Похоже на контрольную.Вы пишете для него один тег:
Получившаяся кнопка представляет собой «настоящую» кнопку HTML и поэтому выглядит так же, как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.
Хотя возможности ограничены, вы можете легко расширить его, добавив дополнительные свойства. Скорее всего, большинству свойств придется просто «передать» нижележащую кнопку, как я сделал для text, enabled и cssclass.
Если у кого-нибудь есть решение попроще, чище или лучше, я был бы рад его услышать. Это больно, но это работает.
HTML-ссылок Гиперссылки
Ссылки можно найти почти на всех веб-страницах. Ссылки позволяют пользователям переходить от страницы к странице.
HTML-ссылки — гиперссылки
HTML-ссылки являются гиперссылками.
Вы можете щелкнуть ссылку и перейти к другому документу.
Когда вы наводите указатель мыши на ссылку, стрелка мыши превращается в маленькую руку.
Примечание: Ссылка не обязательно должна быть текстовой. Ссылка может быть изображением или любой другой элемент HTML!
HTML-ссылки — синтаксис
Тег HTML определяет гиперссылку. Он имеет следующий синтаксис:
Пример
В этом примере показано, как создать ссылку на W3Schools.com:
Посетите W3Schools.com!
Попробуй сам »
По умолчанию во всех браузерах ссылки будут выглядеть следующим образом:
Непосещенная ссылка подчеркнута синим цветом
Посещенная ссылка подчеркнута фиолетовым цветом
Активная ссылка подчеркнута красным
Совет: Ссылки, конечно, можно стилизовать с помощью CSS, чтобы еще один взгляд!
HTML-ссылки — целевой атрибут
По умолчанию связанная страница будет отображаться в текущем окне браузера.Чтобы изменить это, вы должны указать другую цель для ссылки.
Атрибут цели указывает, где открыть связанный документ.
Атрибут цели может иметь одно из следующих значений:
_self — По умолчанию. Открывает документ в то же окно / вкладка, в котором было щелкнуто
_blank — открывает документ в новом окне или вкладке
_parent — открывает документ в родительском фрейме
_top — Открывает документ полностью в окне
Пример
Используйте target = «_ blank», чтобы открыть связанный документ в новом окне или вкладке браузера:
Посетите W3Schools!
Попробуй сам »
Абсолютные и относительные URL-адреса
В обоих приведенных выше примерах используется абсолютный URL-адрес (полный веб-адрес). в атрибуте href .
Локальная ссылка (ссылка на страницу на том же веб-сайте) указывается с относительный URL (без часть «https: // www»):
Пример
Абсолютные URL-адреса
W3C
Google
Родственник URL-адреса

HTML-изображения

CSS Учебник
Попробуй сам »
HTML-ссылки — использование изображения в качестве ссылки
Чтобы использовать изображение в качестве ссылки, просто поместите внутри тега tag:
Пример

Попробуй сам »
Ссылка на адрес электронной почты
Использовать mailto: внутри href для создания ссылки, открывающей программу электронной почты пользователя (чтобы пусть отправят новое письмо):
Кнопка как ссылка
Чтобы использовать кнопку HTML в качестве ссылки, необходимо добавить код JavaScript.
JavaScript позволяет указать, что происходит при определенных событиях, например, щелчком кнопки:
Пример
кнопка < > Учебное пособие по HTML
Попробуй сам »
Названия ссылок
Атрибут title определяет дополнительную информацию об элементе. Информация чаще всего отображается в виде текста всплывающей подсказки при наведении курсора мыши на элемент.
Пример
Посетите наше руководство по HTML
Попробуй сам »
Подробнее об абсолютных и относительных URL-адресах
Пример
Используйте полный URL-адрес для ссылки на веб-страницу:
Учебник по HTML
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в папке html на текущем веб-сайте:
Учебник по HTML
Попробуйте сами »
Пример
Ссылка на страницу, расположенную в той же папке, что и текущая страница:
Учебник по HTML
Попробуйте сами »
Краткое содержание главы
Используйте элемент для определения ссылки
Используйте атрибут href для определения адреса ссылки
Используйте атрибут target , чтобы определить, где открыть связанный документ
Используйте элемент (внутри ) использовать изображение как ссылку
Используйте mailto: схема внутри Атрибут href для создания ссылки, которая открывает программу электронной почты пользователя
HTML-теги ссылок
Тег Описание
Определяет гиперссылку

Как добавить кнопку HTML, которая действует как ссылка
Существует несколько способов создания кнопки HTML, которая действует как ссылка (т.е.е., нажав на нее, пользователь перенаправляется на указанный URL). Вы можете выбрать один из следующих методов, чтобы добавить ссылку на кнопку HTML.
Добавить встроенное событие onclick¶
Вы можете добавить встроенное событие onclick в тег Попробуйте сами »
Также можно добавить встроенное событие onclick в тег внутри элемента.
Пример добавления события onclick в тег
: ¶
Название документа <форма>
Попробуйте сами »Ссылки не будут работать, если отключен JavaScript, а поисковые системы могут игнорировать такие ссылки.
Используйте атрибут action или formaction.¶
Другой способ создания кнопки, которая действует как ссылка, — это использование атрибута action или formaction внутри элемента
.
Пример создания кнопки, действующей как ссылка с атрибутом действия: ¶
Название документа
Попробуйте сами »
Чтобы открыть ссылку в новой вкладке, добавьте target =" _ blank ".
Пример открытия ссылки с кнопки в новом окне: ¶
Название документа
Попробуйте сами »
Поскольку формы нет и данные не отправляются, это может быть семантически неверным. Однако эта разметка действительна.
Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶
Название документа <форма>
Попробуйте сами »Атрибут formaction используется только с кнопками, имеющими type =" submit ". Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой.
Стиль ссылки как кнопки¶
Добавить ссылку в стиле кнопки со свойствами CSS. Атрибут href является обязательным атрибутом тега . Он определяет ссылку на веб-странице или место на той же странице, по которому пользователь переходит после нажатия на ссылку.
Пример стилизации ссылки как кнопки с помощью CSS: ¶
Название документа <стиль> .кнопка { цвет фона: # 1c87c9; граница: нет; цвет белый; отступ: 20 пикселей 34 пикселей; выравнивание текста: центр; текстовое оформление: нет; дисплей: встроенный блок; размер шрифта: 20 пикселей; маржа: 4px 2px; курсор: указатель; }Нажмите здесь
Попробуйте сами »
Поскольку требуется сложное оформление, это может не работать в некоторых браузерах.
Рассмотрим еще один пример.
Пример оформления ссылки как кнопки: ¶
Название документа <стиль> .кнопка { дисплей: встроенный блок; отступ: 10 пикселей 20 пикселей; выравнивание текста: центр; текстовое оформление: нет; цвет: #ffffff; цвет фона: # 7aa8b7; радиус границы: 6 пикселей; наброски: нет; } Тег кнопки HTML
Попробуйте сами »
Как создать кнопку HTML, которая действует как ссылка | by W3docs
Иногда нам нужно создать кнопку HTML, которая действует как ссылка (т. е. при нажатии на нее пользователь перенаправляется на указанный URL-адрес).
Есть несколько методов, мы представим 3 из них. Выберите один из следующих методов, чтобы добавить ссылку на кнопку HTML.
Хорошо. Пошли!
a) В тег HTML

Попробуйте сами
Это может не сработать, если кнопка находится внутри тега.
б) В тег внутри элемента HTML.
Пример

Заголовок документа

Попробуйте сами
Ссылки не будут работать, когда JavaScript отключен, а поисковые системы могут игнорировать такие вид ссылок.
a) Атрибут действия

Заголовок документа

Попробуйте сами
Чтобы открыть ссылку в новой вкладке, добавьте атрибут target = ”_ blank”.

Заголовок документа

Попробовать себя
Поскольку форма отсутствует и данные не отправлены, это может быть семантически неверным. Однако эта разметка действительна.
б) Атрибут HTML5 formaction.
Пример

Заголовок документа

Попробуйте сами
Атрибут formaction используется только для кнопок с type =» submit » . Поскольку этот атрибут специфичен для HTML5, поддержка в старых браузерах может быть недостаточной.
Пример

Заголовок документа
<стиль>
.кнопка {
background-color: # 1c87c9;
граница: отсутствует;
цвет: белый;
отступ: 20 пикселей 34 пикселей;
выравнивание текста: по центру;
текст-украшение: нет;
дисплей: встроенный блок;
font-size: 20 пикселей;
margin: 4px 2px;
курсор: указатель;
}

Нажмите здесь

Попробуйте сами
Поскольку требуется сложный стиль, он может не работать в некоторых браузерах.
Как создать кнопку HTML, которая действует как ссылка?
Как создать кнопку HTML, которая действует как ссылка?
Существует несколько методов создания кнопки HTML, которая действует как ссылка. Некоторые из них обсуждаются ниже:
Примечание: Добавление базового свойства CSS к кнопке в каждом методе, чтобы кнопка выглядела лучше.
Использование события onclick: Атрибут события onclick работает, когда пользователь нажимает кнопку.При щелчке мышью по кнопке кнопка действует как ссылка и перенаправляет страницу в указанное место.

< html >

< голова >

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

стиль >
.GFG {
цвет фона: белый;
граница: сплошной черный цвет 2 пикселя;
цвет: зеленый;
отступ: 5px 10px;
выравнивание текста: по центру;
дисплей: inline-block;
размер шрифта: 20 пикселей;
поле: 10px 30px;
курсор: указатель;
}
стиль >
головка >

< корпус 3>
< h2 > GeeksforGeeks h2 >

< кнопка класс = "G " G
Щелкните здесь
кнопка >
корпус >

html >
Использование тега кнопки в side тег : Этот метод создает кнопку внутри тега привязки.Тег привязки перенаправляет веб-страницу в указанное место.

< html >

< голова >

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

стиль >
.GFG {
цвет фона: белый;
граница: сплошной черный цвет 2 пикселя;
цвет: зеленый;
отступ: 5px 10px;
выравнивание текста: по центру;
дисплей: inline-block;
размер шрифта: 20 пикселей;
поле: 10px 30px;
курсор: указатель;
}
стиль >
головка >

< корпус 3> 900
< h2 > GeeksforGeeks h2 >

< кнопка class = "G " G >
Нажмите здесь
кнопка >
a >
корпус >

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

< html >

< голова >

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

стиль >
.GFG {
цвет фона: белый;
граница: сплошной черный цвет 2 пикселя;
цвет: зеленый;
отступ: 5px 10px;
выравнивание текста: по центру;
дисплей: inline-block;
размер шрифта: 20 пикселей;
поле: 10px 30px;
курсор: указатель;
текстовое оформление: нет;
}
стиль >
головка >

< корпус 3>
< h2 > GeeksforGeeks h2 >

Нажмите здесь
a
body >

html >
Использование тегов формы: Этот метод использует тег формы и тег кнопки .При нажатии кнопки вызывается атрибут действия формы, и веб-страница перенаправляется в указанное место.

< html >

< голова >

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

стиль >
.gfg {
цвет фона: белый;
граница: сплошной черный цвет 2 пикселя;
цвет: зеленый;
отступ: 5px 10px;
выравнивание текста: по центру;
дисплей: inline-block;
размер шрифта: 20 пикселей;
поле: 10px 30px;
курсор: указатель;
}
стиль >
головка >

< корпус 3> 900
< h2 > GeeksforGeeks h2 >

< кнопка класс "gfg" введите = "submit" >
Нажмите здесь
кнопку >
форма >
корпус 9 0013>

html >
Примечание: Результат будет одинаковым для всех методов.
Вывод:
Перед нажатием кнопки:
После нажатия кнопки:

Как создать кнопку HTML, которая действует как ссылка
Тема: HTML / CSSPrev | След.
Ответ: Используйте кнопку «Отправить»
В случае, если у вас нет возможности использовать элемент , вы можете использовать кнопку отправки внутри
, где значение атрибута действия установлено на желаемый URL.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Заставить кнопку HTML работать как ссылку <стиль> форма { / * Чтобы форма оставалась в потоке с окружающим текстом * / дисплей: встроенный; }
Однако, если вы можете использовать элемент по своему выбору, вам лучше использовать элемент привязки ( ) и стилизовать его, используя свойства CSS, чтобы он выглядел как кнопка, например:
Сделать HTML-ссылку похожей на кнопку <стиль> а.link-btn { цвет: #fff; фон: # 337ab7; дисплей: встроенный блок; граница: 1px solid # 2e6da4; шрифт: полужирный, 14 пикселей, Arial, без засечек; текстовое оформление: нет; радиус границы: 2 пикселя; отступ: 6 пикселей 20 пикселей; } a.link-btn: hover { цвет фона: # 245582; цвет границы: # 1a3e5b; }Перейти в Google
Связанные вопросы и ответы
Вот еще несколько часто задаваемых вопросов по этой теме:
5 способов создания кнопок HTML-ссылок
Добро пожаловать в краткое руководство по созданию кнопок HTML-ссылок.Текстовые ссылки работают отлично, но они не достаточно цепляющие. Также на мобильных устройствах у человека с толстыми пальцами могут возникнуть проблемы с нажатием на эту небольшую текстовую ссылку.
Самый простой способ создать ссылки кнопки HTML - заключить кнопку в тег привязки - < / а>
Но на самом деле есть несколько других способов сделать это - Прочтите, чтобы узнать!
ⓘ Я включил zip-файл со всеми примерами исходного кода в начале этого руководства, так что вам не нужно копировать и вставлять все… Или, если вы просто хотите погрузиться прямо сейчас.
НАСТОЯЩИЕ БЫСТРЫЕ СЛАЙДЫ
СОДЕРЖАНИЕ
СКАЧАТЬ И ПРИМЕЧАНИЯ
Во-первых, вот ссылка для загрузки кода примера, как и было обещано.
ПРИМЕР КОДА СКАЧАТЬ
Щелкните здесь, чтобы загрузить исходный код, я выпустил его под лицензией MIT, так что не стесняйтесь создавать на его основе или использовать в своем собственном проекте.
КРАТКИЕ СВЕДЕНИЯ
Если вы заметили ошибку, пожалуйста, оставьте комментарий ниже.Я тоже стараюсь отвечать на вопросы, но это один человек против всего мира ... Если вам срочно нужны ответы, просмотрите мой список веб-сайтов, чтобы получить помощь в программировании.
КНОПКИ
Хорошо, давайте теперь перейдем к различным способам создания «кнопочной ссылки» в HTML.
1) ПЕРЕПРАВКА JAVASCRIPT
<кнопка> НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ДОСТУПИТЬ К ЯЩИКУ КОДА X
Самый простой способ создать ссылку на кнопку - это, вероятно, обработать ее с помощью небольшого количества Javascript.
Свойство onclick используется для указания, что делать при нажатии кнопки.
location = 'URL' установит, куда перенаправлять при нажатии кнопки.
П.С. Вы заметите, что в некоторых других руководствах вместо этого используется location.href = 'URL' . В этом нет ничего плохого, и это «старомодный» способ перенаправления. Оба по-прежнему будут работать, location является синонимом location.href .
2) ПОДАТЬ ФОРМУ
->
Кто сказал, что мы не можем творчески использовать формы? Вышеупомянутое отправит пустую форму, которая фактически действует как ссылка. Пара коротких заметок для абсолютных новичков:
Измените action = "URL" , чтобы перенаправить пользователя туда, куда вы хотите.
Мы также можем добавить target = "_ blank" для открытия в новой вкладке. В противном случае, если не определено, по умолчанию будет target = "_ self" , и он откроется в том же окне.
Обратите внимание, что здесь мы используем вместо - Отправить будет обрабатывать форму при нажатии, а кнопка - нет.
3) ФОРМА ДЕЙСТВИЯ

Действие формы - это свойство, добавленное в HTML5, и оно фактически используется для отправки формы по альтернативному URL-адресу. В случае «кнопки для ссылки» мы можем использовать ее для удобства, чтобы создать несколько ссылок в одной форме.
4) ПЕРЕКЛЮЧЕНИЕ ССЫЛКИ НА КНОПКУ С CSS
<стиль> .linkbutton { дисплей: встроенный блок; отступ: 10 пикселей; маржа: 5 пикселей; фон: # 8a110b; цвет: #fff; текстовое оформление: нет; }Перейти к Code Boxx
Красота HTML и CSS - мы можем настроить практически каждый элемент. Да, мы даже можем настроить ссылку так, чтобы она выглядела точно как кнопка ... Но по сути, это по-прежнему ссылка.
5) КНОПКА ВНУТРЕННЕЙ ТЯГИ

Ни для кого не секрет, мы можем заключать изображения в ссылки. Так что да, у нас может быть лучшее из обоих миров - кнопки переноса в ссылки.
КАКОЙ СПОСОБ ЛУЧШЕ?
Лично я либо заключу кнопку в ссылку, либо использую CSS, чтобы превратить ссылку в кнопку.Главные причины собственно простота реализации и цели поисковой оптимизации (SEO). Это может быть немного сложная тема, но вкратце, мы хотим помочь поисковым системам как можно проще находить релевантные ссылки на веб-странице.
Например, если у нас есть страница о том, как играть на пианино, мы захотим включить соответствующие ссылки на другие соответствующие страницы пианино ... Но вот проблема - поисковые системы не обязательно будут следить за всеми Javascripts и формами, чтобы увидеть, где они ведут к.Так что старайтесь как можно чаще использовать традиционные .
YOUTUBE TUTORIAL

ИНФОГРАФИЧЕСКИЙ ЛИСТ
Как создать ссылки на кнопки HTML (щелкните, чтобы увеличить)
ССЫЛКИ И ССЫЛКИ
КОНЕЦ
Спасибо, что прочитали, и мы подошли к концу этого руководства. Я надеюсь, что это помогло вам в вашем проекте, и если вы хотите поделиться чем-нибудь с этим руководством, не стесняйтесь оставлять комментарии ниже.Удачи и удачного кодирования!
.

Кнопка со ссылкой html: Ссылка как кнопка | htmlbook.ru

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

Добавьте строчный

Пример¶

Пример¶

(adsbygoogle=window.adsbygoogle||[]).push({});Используйте атрибут action или formaction внутри элемента <form>.¶

Пример¶

Пример¶

Пример¶

Добавьте ссылку в стиле HTML кнопки (используя CSS)¶

Пример¶

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

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

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

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

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

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

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

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

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

Итоги

Ссылки против кнопок в современных веб-приложениях — CSS-LIVE

Кнопки

Ссылки

Что такое навигация? А что маршрутизация?

Откуда возникает путаница?

Роль UX в разработке доступных приложений

Что можно для этого сделать?

Это ещё не конец.

P.S. Это тоже может быть интересно:

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

Делаем кнопку input ссылкой

Комментарии:

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

Как сделать кнопку в html

Ссылки и кнопки — сходства и различия

Проблематика

Ссылка-кнопка: что будет, если ссылку сделать функциональным элементом?

Кнопка-ссылка: что будет, если кнопку сделать навигационным элементом?

Кнопка или ссылка — решающие правила

beepcar.ru — правильно

едем.рф — неправильно

blablacar.ru — правильно+

Оформление ссылок и кнопок

Наложения гиперссылок и кнопок

Как сделать кнопку-ссылку на сайт в Telegram-канале с помощью бота

Как добавлять кнопки в Телеграм-канале

Создаём бота для канала: пошаговая инструкция

Настраиваем бота

Как сделать пост с url-кнопкой и реакциями в Telegram

css — Как сделать HTML-ссылку похожей на кнопку?

HTML-ссылок Гиперссылки

HTML-ссылки — гиперссылки

HTML-ссылки — синтаксис

HTML-ссылки — целевой атрибут

Пример

Абсолютные и относительные URL-адреса

Пример

Родственник URL-адреса

HTML-ссылки — использование изображения в качестве ссылки

Ссылка на адрес электронной почты

Кнопка как ссылка

Пример

Названия ссылок

Пример

Подробнее об абсолютных и относительных URL-адресах

Пример

Пример

Пример

Краткое содержание главы

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

Добавить встроенное событие onclick¶

Пример добавления события onclick в тег

Пример добавления события onclick в тег

Используйте атрибут action или formaction.¶

Пример создания кнопки, действующей как ссылка с атрибутом действия: ¶

Пример открытия ссылки с кнопки в новом окне: ¶

Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶

Стиль ссылки как кнопки¶

Пример оформления ссылки как кнопки: ¶

Используйте атрибут action или formaction внутри элемента <form>.¶