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

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

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

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

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

Пример

html> html> head> title>Заголовок документа title> head> body> button onclick="window.location.href = 'https://w3docs.com';">Click Here button> body> html>

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

Пример

html> html> head> title>Заголовок документа title> head> body> form> input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/> form> body> html>

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

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

атрибут action

Пример

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

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

Пример

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 .

Пример

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)

Пример

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/" class="button">Click Here a> body> html>

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

Что лучше использовать: ссылки или кнопки

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

Кекс сейчас всё объяснит

Почему возникает проблема

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

Ссылки создаются с помощью тега .

Кнопка — это функциональный элемент. Она отвечает за выполнение определённой функции: добавить в корзину, купить, отправить, проголосовать и т. д.

Для кнопок используют тег .

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

Пример двух кнопок, где нижняя похожа на ссылку Пример ссылки, похожей на кнопку

Что случится, если вместо ссылки сделать кнопку

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

Контекстное меню при клике правой кнопкой мыши на кнопку

Такая кнопка не позволит открыть страницу в новой вкладке и через комбинацию клавиш — Ctrl и левая кнопка мыши.

При наведении курсора на правильную ссылку её адрес появляется внизу окна браузера. URL-адрес, обёрнутый в , не отобразится.

Адрес правильной ссылки в окне браузера при наведении на неё курсора

Что произойдёт, если вместо кнопки сделать ссылку

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

Контекстное меню при клике правой кнопкой мыши на ссылку

При наведении курсора на псевдоссылку внизу окна браузера появится не адрес, а javascript:; или АдресТекущейСтраницы/# .

Как определить элемент по макету

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

У ссылки должны быть стили для состояния покоя, при наведения курсора :hover , в момент нажатия :focus , активного :active и иногда состояния, когда пользователь уже посещал эту страницу :visited .

У кнопки нет состояния :visited , зато есть состояние блока :disabled .

Состояния ссылок в стайлгайде макета

Однако рассчитывать только на макет не нужно. У ссылки может не быть :visited , а у блока :disabled — это может запутать.

Всё-таки кнопка или ссылка

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

Ссылка

Кнопка

За что отвечает

Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.

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

Что видит пользователь

• При наведении курсора на ссылку внизу окна браузера возникает её адрес.

• Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

• При наведении курсора на ссылку внизу окна браузера не отображается адрес.

• Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

22 ноября 2023

Знакомство с HTML

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

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

1 ноября 2023

Специальные символы в HTML

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

23 октября 2023

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

Вот короткое демо:

18 октября 2023

Зачем нужен метатег viewport

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

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

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

18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

12 сентября 2023

Осмысленный alt-текст: 6 правил

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

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

31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

13 июня 2023

Как понять, что перед вами заголовок

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

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

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

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

8 июня 2023

Используйте ссылки и кнопки правильно. Пожалуйста

Почему возникает проблема

Ссылки создаются с помощью тега .

Для кнопок используют тег .

Пример двух кнопок, где нижняя похожа на ссылку Пример ссылки, похожей на кнопку

Что случится, если вместо ссылки сделать кнопку

Контекстное меню при клике правой кнопкой мыши на кнопку

Адрес правильной ссылки в окне браузера при наведении на неё курсора

Что произойдёт, если вместо кнопки сделать ссылку

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

Контекстное меню при клике правой кнопкой мыши на ссылку

Как определить элемент по макету

У кнопки нет состояния :visited , зато есть состояние блока :disabled .

Состояния ссылок в стайлгайде макета

Всё-таки кнопка или ссылка?

Ссылка

Кнопка

За что отвечает

Навигация, т. е. пользователь перемещается на другую часть страницы или на новую страницу.

Что видит пользователь

При наведении курсора на ссылку внизу окна браузера возникает её адрес.

Через меню по клику правой кнопкой мыши можно скопировать, отправить, открыть ссылку в новой вкладке.

При наведении курсора на ссылку внизу окна браузера не отображается адрес.

Через меню по клику правой кнопкой мыши нельзя скопировать адрес или поделиться им.

Пример, чтобы расставить всё по своим местам

Другие великие противостояния

Как ставить пустые ссылки: 7 способов
Абсолютные и относительные ссылки
Когда использовать флексы, а когда гриды
Что лучше — табы или пробелы?

Ссылки ссылками, а промокод VESELO даст приятную скидку на любой профессиональный курс в HTML Academy. Например, на курс «Анимации для фронтендеров» можно записаться в любой момент, а пользы для карьеры будет целый вагон.

Блог компании HTML Academy
Веб-разработка
Программирование
HTML
Дизайн

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

Поддержка браузерами возможностей CSS3 и в связи с этим активное использование в веб-дизайне градиентов, теней и скруглений привело к тому, что стала размываться чёткая грань между встроенными элементами интерфейса и «нарисованными». На деле пользователю должно быть всё равно, что перед ним, ссылка или кнопка, пусть даже они выглядят абсолютно одинаково, ведь на то и другое можно щёлкнуть. В действительности же, неверное использование одного элемента взамен другого может привести к нарушению понимания логики сайта. Иными словами, посетителю сайта пользоваться им станет неудобно и некомфортно.

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

Пример 1. Оформление элементов

HTML5 CSS3 IE Cr Op Sa Fx

Ссылка и кнопка

Вот как это выглядит в браузере Chrome (рис. 1).

Ссылка и кнопка, вид которых изменён через стили

Рис. 1. Ссылка и кнопка, вид которых изменён через стили

Разницы на первый взгляд нет. Оба элемента одинаковы, при наведении на них курсора мыши он превращается в «руку». Можно щёлкать и ждать ответного гудка. Вот тут как раз и начинаются мелочи, в которых кроется дьявол. Систематизирую различия в мелочах.

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

при щелчке по кнопке происходит переход к странице, заданной внутри атрибута action тега . Разумеется, это срабатывает, если у нас кнопка вложена в форму. В примере выше можно хоть защёлкать кнопку, ни к чему это не приведёт;
на кнопку можно навесить функцию JavaScript, которая будет делать что-нибудь фееричное, чего не может ссылка.

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

Что можно сделать для устранения этого противоречия. Вариантов несколько.

Ничего не делать, пользователи сами пусть разбираются.
Воспользоваться опытом JavaScript. В этом случае обычные ссылки делаются подчёркнутыми (что, в общем-то, не обязательно), а текст, при нажатии на который открывается невидимый блок или меняется содержимое текущей страницы, выделяется пунктирным подчеркиванием.
Убрать с кнопки свойство cursor , оставив значение по умолчанию.

Текст с пунктиром показан на рис. 2. Для наглядности несколько увеличил размер шрифта.

Рис. 2. Кнопка с пунктирным подчёркиванием текста

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

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

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

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

Пример

Пример

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

Пример

Пример

Пример

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

Пример

Что лучше использовать: ссылки или кнопки

Почему возникает проблема

Что случится, если вместо ссылки сделать кнопку

Что произойдёт, если вместо кнопки сделать ссылку

Как определить элемент по макету

Всё-таки кнопка или ссылка

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Знакомство с HTML

Специальные символы в HTML

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

Зачем нужен метатег viewport

Атрибут class в HTML на примерах

В чём отличия цитат blockquote, cite и q

Осмысленный alt-текст: 6 правил

Растровая и векторная графика

Как понять, что перед вами заголовок

Используйте ссылки и кнопки правильно. Пожалуйста

Почему возникает проблема

Что случится, если вместо ссылки сделать кнопку

Что произойдёт, если вместо кнопки сделать ссылку

Как определить элемент по макету

Всё-таки кнопка или ссылка?

Пример, чтобы расставить всё по своим местам

Другие великие противостояния

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

Популярные материалы

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