Ссылка на кнопку в html: ссылки или кнопки — журнал «Доктайп»

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 ссылка как кнопка

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

<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, Вебмастеру, для сайта

“Отменить”: кнопка или ссылка?

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

Из статьи вы узнаете:

• как появились кнопки и ссылки,
• чем они отличаются друг от друга,
• что именно необходимо использовать в том или ином случае — фильтры, сортировка, элементы “Назад”, “Закрыть” и т. д.

А в самом конце получите ответ на главный вопрос — как же правильно оформить опцию “Отменить”.

В ходе взаимодействия с тем или иным приложением мы часто становимся участниками диалога, включающего опцию “Отмена” / “Отменить”. Это происходит, когда пользователь заполняет форму или работает с данными (например, в боковой панели или модальном окне).

Обычно эта опция расположена рядом с кнопкой основного действия. Если раньше было принято оформлять ее в виде ссылки, то сейчас мы все чаще встречаем кнопку “Отмена”. 

Навигация vs действие

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

1. Навигация — это ссылка
2. Действие — это кнопка

Почему? Ссылки берут свое начало с первых дней существования всемирной паутины. Именно они и делают ее паутиной (и не просто паутиной, а всемирной). Кнопки — это форма скевоморфизма, способ перенести привычные нам переключатели и действия из физического мира в цифровой. 

Соответственно, мы используем их по-разному:

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

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

UI-дизайн

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

Информационная архитектура

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

Давайте рассмотрим пример — магазин, который продает фрукты. На сайте представлен список доступных для заказа опций:

Пользователь может сделать следующее:

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

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

Применим описанную логику к стандартному пользовательскому интерфейсу

Добавление нового фрукта

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

Современные дизайнеры, как правило, используют вместо ссылки кнопку (или FAB — плавающую кнопку целевого действия) для добавления новых элементов. Однако само по себе это взаимодействие не является действием. Это всего лишь изменение состояния, которое открывает модальное окно для создания записи о новом фрукте. Следовательно, мы имеем дело с навигацией.

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

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

Это взаимодействие вызывает интересную дискуссию: что увидит пользователь, добавив новый фрукт? Вернется ли он к списку фруктов или перейдет на страницу с подробной информацией о новом фрукте? 

Это зависит от того, что важно для пользователя. Чтобы выяснить это, нужно провести ряд исследований. Оба варианта допустимы, но и тот, и другой представляют собой навигацию, хотя и вызванную выполненным действием. (Помните, я говорил, что действия могут запускать навигацию?)

Забудем на секунду о кнопке / ссылке “Отменить” и рассмотрим другие доступные пользователям взаимодействия, чтобы найти окончательный ответ на наш главный вопрос.

Фильтры и сортировка

Просматривая список фруктов, пользователь может сократить число опций при помощи фильтров. Он решает применить фильтр «Яблоки» и отсортировать список по весу. Конечно, речь о работе с данными и поэтому мы должны увидеть здесь кнопку, не так ли? 

Ну, если мы проанализируем действия пользователя, окажется, что никакие данные в этом случае не подверглись изменениям. Все фрукты по-прежнему в списке. Пользователь ничего не добавил и не отредактировал. Единственное, что он сделал, — изменил внешний вид / состояние интерфейса. А значит, для фильтров или сортировки вместо кнопок необходимо использовать ссылки.

Сбросить фильтры

Эта логика также позволяет сделать вывод, что и взаимодействие “Сбросить фильтры” / “Отменить сортировку” должно быть не кнопкой (т.е. это не действие), а ссылкой (т.е. это изменение состояния интерфейса или возврат к его прежнему состоянию), поскольку никакие данные не подвергаются изменениям.

Вернуться на предыдущую страницу

Допустимое решение — сделать так, чтобы пользователь автоматически переходил на страницу только что добавленного фрукта. Но что если он захочет вернуться на предыдущую страницу (список фруктов)?

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

1. Элемент “Назад”
2. Хлебные крошки

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

Элемент “Назад” — ссылка или хлебные крошки. Бонус: ссылка «Редактировать» для перехода к панели редактирования (это навигация, а не действие!).

Как правило, существует и третий вариант: кнопка «Назад» в браузере — да, это именно кнопка, а не ссылка. Мы рассмотрим его позднее.

Закрыть боковую панель

Мы еще на шаг приблизились к ответу на главный вопрос этой статьи. Что если пользователь хочет закрыть боковую панель «Добавить новый фрукт»? Обычно для этого необходимо кликнуть либо по экрану за пределами панели, либо по элементу “Закрыть”. 

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

То же самое можно сказать и о закрытии любого другого окна:

Отмена действия

Где бы ни находился элемент “Отменить” — внутри боковой панели, всплывающего (модального) окна или формы (“Редактировать” на странице с подробной информацией о фрукте), взаимодействуя с ним пользователь всякий раз делает ровно то, что было описано в предыдущем разделе — прерывает действие и таким образом возвращается к предыдущему состоянию интерфейса. Следовательно, здесь нужна ссылка, а не кнопка.

«Но ведь отмена — это тоже действие, нет?»

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

«Но как насчет отмены подписки на Netflix?»

Это интересное исключение, но оно объяснимо. В данном случае «Отменить» — это первичное действие. Пользователь по-прежнему может отменить первичное действие с помощью одноименной ссылки. Конечно, лучше не использовать и там, и там слово “Отменить”, а выбрать разные формулировки.

«Но как насчет iOS, Windows или MacOS?»

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

Следует избегать “зловещей долины” UI. Когда интерфейс имитирует ОС, это сбивает пользователей с толку. Отказ от привычных UI-шаблонов негативно сказывается на юзабилити. Пусть ОС будет ОС, а приложение — приложением.

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

«А как насчет главного меню? Это же точно навигация?»

Да, верно. Это действительно элементы навигации, и взаимодействие с ними приводит только к изменению состояния интерфейса. Поэтому мы ожидаем увидеть не кнопки, а ссылки. На практике же реализация главного меню в виде ряда кнопок стала своего рода стандартом. Вероятнее всего, столкнувшись с таким решением, пользователи не придут в замешательство, поэтому я не вижу здесь серьезной проблемы.

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

‍

Будьте последовательны

Сравнивая кнопки и ссылки, мы видим, что между ними существует фундаментальное различие.

Первые инициируют действия, которые выполняются непосредственно внутри таблицы.

Вторые запускают навигацию, то есть действие выполняется в измененном интерфейсе.

Когда вы все делаете последовательно, пользователь понимает, чего ожидать от взаимодействия.

Заключение

Вопрос о том, как лучше оформить элемент “Отменить” — в виде ссылки или кнопки — поднимался и ранее. Я думаю, что эта статья UX movement содержала некоторые правильные выводы: отмена — это не действие, но она все же не должна быть кнопкой. (Мне вообще кажется, что серая кнопка больше похожа на неактивную, но это уже тема другого разговора).

Люк Вроблевски в своем знаменитом посте приходит практически к тем же выводам, что и я (кроме того, он также разбирает вопрос позиционирования элементов).

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

Помните, что это не истина в последней инстанции. Я прекрасно понимаю, что иногда кнопка “Отменить” смотрится более выигрышно. Как и в случае с главным меню, со временем подход может измениться.

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

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

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

Самый простой способ создать HTML-ссылку на кнопку — поместить кнопку в тег привязки — com">Go to Code Boxx

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

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

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

СОДЕРЖАНИЕ

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

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

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

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

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

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

МЕТОД 1) JAVASCRIPT REDIRECT

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

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

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

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

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

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

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

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

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

МЕТОД 4) ПРЕВРАТИТЬ ССЫЛКУ В КНОПКУ С CSS