Html код кнопки для сайта со ссылкой: Как кнопку сделать ссылкой? | WebReference

Содержание

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.03.2020

Редакторы: Влад Мержевич

Кнопка html с ссылкой: примеры кода

При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.

На любом сайте – визитке, информационном, магазине, лендинге – пользователи должны совершить необходимое действие. Интуитивно понятный элемент действия – кнопка. Ее используют, чтобы призвать посетителя сайта совершить важное действие: купить, отправить, скачать, войти и т.п.

Другая часть интерфейса – ссылки, их гораздо больше, чем кнопок. В виде простого текста (<a href=»адрес»>Ссылка</a>) они выглядят неприглядно, не всегда соответствуют дизайну. Основное правило оформления ссылок: пользователь должен понять, что перед ним не обычный текст без наведения мышью.

Кнопка и ссылка – разные понятия в html. Первая запускает какой-то процесс, вторая перенаправляет куда-либо.

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

HTML запрещает комбинировать между собой <button> и <a>. Несмотря на это есть способы открытия страницы при нажатии на <button>.

Вложить <button>внутрь элемента <form> в html

Использовать JavaScript. Добавить к элементу <button> событие onclick, внутри него вписать document.location, значением будет адрес веб-страницы.

<button>Переход по ссылке</button>

Заставить кнопку действовать, как ссылка – нерациональное решение. Это перегружает код и повышает вероятность ошибок.

Если нужно перенаправить человека на другую страницу, линк стилизуют под кнопку. Для этого используют CSS.

CSS

Это не язык программирования, а формальный язык для описания оформления внешнего вида HTML-документа.

Объектам придают практически любой вид при помощи html и эффектов CSS:

— Градиентная заливка

— Тень

— Изменение форм и размеров

— Оформление ссылки картинкой

— Перенаправление на телефонный номер или мессенджер 

— Меню-аккордеон (Сворачивающееся и разворачивающееся)

— Выпадающее меню

— Опции «Назад», «Вернуться вверх»

— Hover -эффекты (инверсия, изменение цвета и прозрачности, изменение размера, расположения объекта и многое другое)

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

1. Чистый html

Линк маскируется под кнопочку следующим образом:

1)Создать стандартный линк и указать адрес к стилям

2)Прописать стили, которые преобразуют линк в привычный прямоугольник:

<a>{

padding: 10px 10px;/* отступы от букв до краев */

text-decoration: none;/* убирает подчеркивание */

}</pre>

Каждая ссылка на странице станет выглядеть как кнопка.

2. Html/CSS

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

Нужно придумать и написать стиль:

<pre><link rel=»stylesheet» href=»link_button_3.css»>

<a href=»https://site.ru»>Ваша ссылка</a></pre>

<pre>.ssilka{ border:1px solid #ccc; /*рамка*/

background:#eaeaea; /*фон*/

padding: 10px 10px; /*отступы внутри*/

text-decoration: none; /*убрать подчеркивание*/ }</pre>

3. Добавить дизайн

В дизайне многостраничника, интернет-магазина, лендинга для Инстаграм в качестве кнопки используют фотографии, картинки, нарисованные в Фотошопе. Чтобы при клике на изображение срабатывал переход по ссылке, нужно:

Обернуть картинку тегом:

<pre><a href=»site.ru»><img src=»button.png»></a></pre>

Сохраняйте исходники кнопок, нарисованных в графическом редакторе. Если понадобится изменить информацию, придется рисовать заново.

Примеры использования

Последний метод применим при создании лендинга для Инстаграм в конструкторе Hipolink.net.

В разделе «Фото» можно вставить изображение, в настройках добавить к нему url. Клик на картинку переведет в магазин, другой раздел, сайт. Так картинка или фотография станут кнопкой.

Создание ссылок в виде кнопок предусмотрено одноименным разделом.

Знания html не понадобится: настройки интуитивно понятны для неопытного пользователя. Бесплатный тариф предоставляет опции редактирования формы и размера кнопок. На тарифах «Personal» и «Business» доступно изменение цвета, добавление иконок.

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

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:

<form action="/example/" target="_blank">

Демо

Масштабирование Full HD в 4K без размытия

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Кнопка-ссылка</button>
</form>

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

приведёт на адрес /example/? вместо ожидаемого /example/.

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

<a href="/example/"><button>Кнопка-ссылка</button></a>

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Расширение для предотвращения размытия изображений на веб-страницах

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:


<button>Кнопка-ссылка</button>

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

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

Нестандартные расширения CSS

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

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance, значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example {
       -moz-appearance: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Демо

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

HTML кнопка, как ссылка и ссылка, как кнопка

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

Итак, приступим.

Внимание:
В коде я указываю «ВАША_ССЫЛКА_НА_СТРАНИЦУ» или «https://bloggood.ru/». Естественно, вам нужно заменить эти адреса своими.

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

 1  способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:


<form action="ВАША_ССЫЛКА_НА_СТРАНИЦУ " method="GET">
<input ENGINE="submit" value="Кнопка" />
</form>

2 способ:
Также можно использовать HTML события:


<input value="Кнопка" type="button" />

3 способ:
Тоже взят из HTML события, только другим способом:

JS:


<script type="text/javascript">
function BlogGood()
{
location.href='https://bloggood.ru/';
}
</script>

HTML:


<input value="Кнопка" type="button" />

BlogGood() – это название функции вы можете назвать по своему.

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

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1  способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:


<a href=" ВАША_ССЫЛКА_НА_СТРАНИЦУ "><img src="knopka.jpeg"></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

CSS:


a
{
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
padding: .2em .75em;
text-decoration: none;
}

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

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

CSS:


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

HTML:


<a href="https://bloggood.ru">ССЫЛКА на BLOGGOOD.RU</a>

Вроде, ничего не пропустил и ничего не напутал.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, html, javascript, Вебмастеру, для сайта

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

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

Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. 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 можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.

Удачи!

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

Кнопки | CSS — Примеры

Простая HTML кнопка для сайта

Есть несколько типов input для создания кнопки и тег button [ type=»button | reset | submit» ]. Внешне и функционально они абсолютно одинаковы.

button

<input type="button" value="input"/>
<button type="button">button</button>

Когда использовать тег button?

  • button имеет открывающий и закрывающий тег, а значит он может содержать дочерние теги,
  • когда текст на кнопке один, а значение value при клике должно передаваться другое.

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

Из ссылки, тега span или div можно сделать с помощью CSS очень даже симпатичную кнопку.

Посмотреть описание


<a href="#">кнопка</a>

Создание кнопки: «А нужно ли изменять вид кнопки при наведении или делать кнопку с эффектом нажатия?»

Динамические эффекты реализуются благодаря псевдоклассам:

  • :hover — при наведении. С появлением сенсорных экранов необходимость в :hover отпала. Для остальных же нужно как минимум изменение вида курсора мышки, чтобы дать понять, что элемент не является декорацией.
  • :active — в момент нажатия кнопки. Когда на странице тут же что-то явно происходит, например, переход по ссылке, загрузка модального окна, появляется значок обработки формы, то :active можно опустить.
  • :focus — пока кнопка в фокусе, то есть когда пользователь нажал на кнопку, но ещё не щёлкнул курсором мышки в другое место окна браузера. Без :focus невозможно объединить visibility: hidden; и transition. Если слишком быстро убрать мышку, то элемент повиснет в «половинном» состоянии, например, ссылка будет прозрачна, но по ней можно делать переход.

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

Код кнопки для сайта

Иногда самый простой внешний вид может выглядеть более стильно, чем навороченная с крутыми эффектами кнопка. Взгляните, как она тут [cssdeck.com] смотрится.

Добавить в корзину


<a href="#">кнопка</a>


<a href="#">кнопка</a>

Как у Сбербанка


<a href="#">кнопка</a>

Кнопка с градиентом

Градиенты плохо поддаются анимации, плавной смене цвета фона. Что же делать? Ответ: box-shadow [перейдите по ссылке, там есть суперская форма входа].

Купить


<a href="#">кнопка</a>

А вот всякие перемещения работают на ура.

Забронировать


<a href="#" tabindex="0">кнопка</a>

Довольно популярно разделение кнопки на два цвета

Положить в корзину


<a href="#">кнопка</a>

Красивые кнопки CSS

10 999 р.


<a href="#">кнопка</a>

Как у Google


<a href="#">кнопка</a>


<a href="#" tabindex="0">кнопка</a>

Заказать


<a href="#">Заказать</a>

<a href="#">Установить</a>

Кнопки «Скачать» CSS

Скачать
бесплатно первые 30 дней Автор


<a href="#">Скачать
бесплатно первые 30 дней</a>

скачать


<a href="#">Скачать</a>

Стилизация кнопок с помощью CSS

Анимированная кнопка: «свечение текста»


<input type="button" value="Купить">



<input type="button" value="запись">

Стиль кнопок с бликами

Глянцевая кнопка


<a href="#">кнопка</a>


<a href="#">кнопка</a>

Заказать билеты


<a href="#">кнопка</a>


<a href="#" data-twitter>twitter</a>


<a href="#">кнопка</a>


<a href="#" tabindex="0">кнопка</a>


<a href="#">1</a>

Объёмная кнопка CSS

Объёмная


<a href="#">кнопка</a>

кнопка Автор


<a href="#">кнопка</a>

сделать
заказ Автор


<a href="#">Объёмная</a>

положить в корзину


<a href="#">Объёмная</a>

Вдавленная кнопка

Оформить


<a href="#">Заказать</a>

Выпуклая кнопка HTML


<a href="#">Заказать</a>

Круглые CSS кнопки


<a href="#"></a>

+


<a href="#">+</a>

Анимированная кнопка CSS

Анимированное заполнение происходит так (тут нет лишнего кода, связанного с кнопкой). Другие интересные эффекты загрузки можно найти тут [tympanus.net].


<a href="#" tabindex="0"><span></span></a>



<a href="#" tabindex="0"></a>

3d кнопка CSS


<a href="#" tabindex="0">кнопка</a>

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

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

Кнопка с главным действием должна выделяться из общего содержания, быть контрастной. Тут главное не переусердствовать. Так, например, у интернет магазина e5 это приятно для глаза:

А тут с оранжевым явный перебор, даже на изображении сложно остановить взгляд:

Именно поэтому у Google второстепенные кнопки сначала плоские, а после наведения мышки обретают объём.

Также нужно победить желание сделать кнопку величиной со слона, чтобы не стать объектом баннерной слепоты.

Ссылки против кнопок в современных веб-приложениях — 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, которая действует как ссылка?

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

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | Курс HTML .

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

Вывод:

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

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

Иногда нам нужно создать кнопку HTML, которая действует как ссылка (т.е.е., нажав на нее, пользователь перенаправляется на указанный URL).

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

Хорошо. Пойдем!

a) В тег HTML

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

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

.

б) В тег внутри элемента HTML

.

Пример 

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

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

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

a) Атрибут действия

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

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

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

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

Попробовать себя

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

b) Атрибут HTML5 formaction.

Пример 

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

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

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

Пример 

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

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

Поскольку требуется сложный стиль, он может не работать в некоторых браузерах.

5 способов создания кнопок HTML-ссылок

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

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

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

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

НАСТОЯЩИЕ БЫСТРЫЕ СЛАЙДЫ

СОДЕРЖАНИЕ

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

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

ПРИМЕР КОДА СКАЧАТЬ

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

БЫСТРЫЕ СООБЩЕНИЯ

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

КНОПКИ ССЫЛКИ

Хорошо, давайте теперь перейдем к различным способам создания «кнопочной ссылки» в HTML.

1) ПЕРЕПРАВКА JAVASCRIPT 

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

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

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

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

  


->

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

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

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

4) ПЕРЕКЛЮЧЕНИЕ ССЫЛКИ НА КНОПКУ С CSS 

  <стиль>
.linkbutton {
  дисплей: встроенный блок;
  отступ: 10 пикселей;
  маржа: 5 пикселей;
  фон: # 8a110b;
  цвет: #fff;
  текстовое оформление: нет;
}



  Перейти к Code Boxx

Красота HTML и CSS - мы можем настроить практически каждый элемент. Да, мы даже можем настроить ссылку так, чтобы она выглядела точно как кнопка ... Но по сути, это по-прежнему ссылка.

5) ВНУТРЕННЯЯ ТЯГА КНОПКИ WRAP

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

КАКОЙ СПОСОБ ЛУЧШЕ?

Лично я либо заключу кнопку в ссылку, либо использую CSS, чтобы превратить ссылку в кнопку.Главные причины собственно простота реализации и цели поисковой оптимизации (SEO). Это может быть немного сложная тема, но вкратце, мы хотим помочь поисковым системам как можно проще находить релевантные ссылки на веб-странице.

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

Учебник по YOUTUBE

ИНФОГРАФИЧЕСКИЙ ЛИСТ

Как создать ссылки на кнопки HTML (щелкните, чтобы увеличить)

ССЫЛКИ И ССЫЛКИ

КОНЕЦ

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

HTML-ссылок на кнопки с onclick href

На этой странице показано, как создавать ссылки кнопок HTML с onclick и href с использованием тега

и стилизовать их с помощью CSS в разных цветах и ​​размерах.

Один из самых простых способов создания ссылок на кнопки HTML - это создать HTML

, который автоматически сгенерирует кнопку.


Хотя этот метод прост, потому что он имеет минимальный код, кнопка выглядит немного простой.Однако можно создать великолепно выглядящие кнопки гиперссылок, добавив код CSS. Продолжайте прокручивать, чтобы увидеть примеры.

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


Совет: Посетите html-color-names.com.

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

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




Вышеупомянутый