Ссылка в виде кнопки html

Ссылка в виде кнопки html

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

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

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

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

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

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

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

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

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

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

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

2017-11-14 / Вр:16:05 / просмотров: 21594

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

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

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

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

Читайте также:  Unicredit bank online banking

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

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

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

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

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

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

2 способ:

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

3 способ:

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

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

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

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

Ссылка на основную публикацию
Adblock detector