Как задать ссылку кнопке html
Перейти к содержимому

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

  • автор:

Создание кнопки-ссылки в HTML: решение доступности

Таким образом, мы создаем не просто «ссылку, выглядящую как кнопка», а полноценную кнопку со стилем.

Секреты создания кнопок-ссылок

Форма в формате кнопки

При работе с отправкой форм, возможно использовать форму с кнопкой, которая «отправляет» данные, перенаправляя на URL-адрес, как настоящий профи:

Скопировать код

 

С применением Bootstrap

Для облегчения задачи можно воспользоваться мощью Bootstrap, применив CSS-классы btn btn-primary :

Скопировать код

Убедитесь, что используете подходящую версию Bootstrap. Для более детальной настройки обращайтесь к документации Bootstrap – это настоящее шедевр посвящённое CSS.

JavaScript: гигант среди кнопок-ссылок

Создание кнопки переадресации на указанный URL с помощью JavaScript. Никакие дополнительные требования не предъявляются:

Скопировать код

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

Визуализация

Так выглядит визуальное представление с использованием символов дверной кнопки (��) и дома (��):

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

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 09-03-2024! ��

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

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

Возьмем первую попавшуюся кнопку из интернета. кнопка — картинка. Давайте её здесь выведем. Если наведем мышку на данную кнопку. то ничего не будет происходить. поскольку данная кнопка не является ссылкой — это » картинка «

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

Далее. просто обернем нашу картинку тегом ссылки

И выведем результат:

Кнопка обернутая ссылкой:

У нас появилась рука( курсора с рукой) при наведении на кнопку + border снизу. Не совсем эстетично.

class=»example»

Уберем бордюр и text-decoration и продублируем с hover

border: unset !important;

text-decoration: none !important;

И давайте. навесим хоть какой-то эффект при наведении. пусть это будет «opacity»

Ну вот. примерно, какая кнопка у нас получилась с ссылкой.

Кнопка обернутая ссылкой:

Код html:

replace

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

Если говорим о кнопке в html? а именно о теге button :

То и такую кнопку можно превратить в ссылку!

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

Мы превратим кнопку в ссылку аналогичным способом, что рассматривали выше пунктом!

Но если мы выведем выше приведенную кнопку ссылкой, то получим. не пойми что. то ли кнопка. то ли ссылка:

Нам нужно навесить на такую кнопку-ссылку немного стилей, чтобы кнопка была похожа на ссылку.

И далее можно пойти двумя путями. 1). просто уничтожить стили кнопки 2). декорировать кнопку под ссылку!

Декорируем кнопку под ссылку:

Начнем с html кода кнопки-ссылки:

По умолчанию стили для ссылки, которые у меня на сайте : text-decoration отключен, добавлен border и продублируем с hover, кроме цвета и цвета бордюра. он прозрачный :

a <
color: #969696;
text-decoration: none;
border-bottom: 1px solid #b3b3b3;
>
a:hover <
color: #000000;
text-decoration: none;
border-bottom: 1px solid #b3b3b300;
>

Добавим стили к нашей кнопке или точнее удалим все признаки кнопки.

button.ex5 <
border: none;
background: none;
cursor: pointer;
>

Смотрим, что у нас получилось.

Результат превращения кнопки в ссылку:

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

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

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

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

Уничтожим поведение ссылки:

a.example, a.example:hover <
border: unset !important;
text-decoration: none !important;
>

Превратим кнопку button в ссылку, сначала уничтожим все признаки кнопки и добавим «cursor» и в самом низу добавим бордюр снизу.

button.ex <
border: unset;
background: unset;
cursor: pointer;
border-bottom: 1px solid;
>

И нарисуем поведение. через hover — удалим бордюр, сделаем цвет прозрачным:

button.ex:hover <
border-bottom: 1px solid #ff000000;
>

У нас получилась кнопка-ссылка:

Поведение кнопки как ссылки в теге form

Предположим, что выше описанные примеры превращения кнопки в ссылку не подходят!

Можно ли реализовать поведение кнопки как ссылки через тег form?

Для того, чтобы реализовать данный пример кнопки-ссылки через тег form нам понадобится. этот самый тег и внутри кнопка. в action помещаем ссылку на страницу, куда надо перейти.

Далее поместим приведенный пример «кнопки ссылки» прямо здесь:

Результат превращения button в ссылку через тег form

Кнопка ссылка открывает в новом окне.

Но как сделать, чтобы кнопка-ссылка открывала в новом окне? Нужно добавить target=_blank в тег form:

Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

Как создать 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 внутри элемента .

  1. атрибут 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>

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

  1. б. атрибут 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>

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

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

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

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка

Кнопка

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

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

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

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

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

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

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

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

Пример

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

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *