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

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉

Итак из этой статьи вы узнаете:

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

Но давайте по порядку.

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

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

Но зачем это нужно. Все гораздо проще и понятнее.

Как сделать кнопку в HTML?

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

Основными атрибутами таких кнопок являются:

type: button | submit | reset

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

Источник

Как сделать ссылку кнопку или кнопку ссылку на HTML? По 3 способа!

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

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

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

Первый способ

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

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

А вот и они, виновники нашей победы над текстовой ссылкой, стили. Они преобразуют ее в кнопку.

Таким способом мы заменили все ссылки на странице на кнопки.

Второй способ

Этот способ достаточно банален и прост. Скорее всего именно так вы и хотели сделать такую кнопку изначально. Просто оберните картинку кнопки тегом » «!

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

Третий способ

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

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

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

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

Первый способ

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

Второй способ

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

Что-бы воспользоваться функцией нужно лишь прописать свойство onClick для любой кнопки.

Третий способ

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

Итоги

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

2 способ:

3 способ:

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

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

Источник

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

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

Правильно

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

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

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

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

Chromium/Blink и WebKit

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

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

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

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

Неправильно

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

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

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

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

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

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

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

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

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

Firefox и Chromium

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 не предусмотрено.

Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.

Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом).

Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?

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

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

Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))

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

Не работает на движок OpenCart 2.0.2

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

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

Логично. Спасибо за быстрый ответ. Буду искать другой путь

Спасибо, что просветили! Я тоже сначала сделал не правильно.

ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки:

С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит 🙂

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

и не мучиться с настройкой редиректа

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

Кстати, ссылка на главную страницу не должна указывать на файл.

Спасибо за подробное описание!
Но у меня не получилось.
Вот код (это популярная в сети кнопка)

Guess Who?

Was born Agnes Gonxha Bojaxhiu.

Что не делаю, все равно код невалидный.

Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.

Самое логичное решение

Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?

Добрый день.
Я только-только начал изучать html.
Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
Спасибо.

Просто было любопытно. Понял Вас, приму к сведению.
Спасибо за ответ.

Всем привет,информация точна и подробная,спасибо автору,но у меня возник вопрос,если у меня сайт разделён фреймами,то как задать условия появления страницы,ссылка которой в кнопке,в определённом фрейме?(у меня на сайте есть верхний фрейм,боковой(там где находится кнопка) и центральный фрейм(в котором и должен появиться файл,который указан ссылкой) )

можно не указывать, она по умолчанию submit, достаточно просто

Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».

У меня сейчас небольшая запара как раз на тему как известно это не поддерживается в браузерах до ie8, можно конечно использовать input, но мне нужно именно button (кнопка с favicon), похоже придётся отказаться от поддержки старых браузеров на своём сайте.

Марат у меня вот такая кнопка но ссылка на неё не работает что делать
.button <
background-color:#0000ff;
border: none;
color: white;
padding:20px;
width: 200px;

Паша, см. секцию «Правильно» в заметке.

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

Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать.

Вот то, что было изначально:

Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL.

Сначала сделал так:

Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так:

Это работает. Еще раз спасибо Badrainbow.

не хотелось использовать javascript в кнопке

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

Использование псевдопротокола javascript: в этом атрибуте вообще ошибочно, он предназначен только для вызова JS-кода через атрибут href ссылок, и от его отсутствия в атрибуте onclick JS-код не перестанет быть JS-кодом.

Напротив, при использовании формы-обёртки кнопка-ссылка будет работать даже при отключённом JS.

Marat Tanalin (автор) 2018-03-04 писал:
Сергей, в обработчике onclick в любом случае указывается именно JavaScript-код. Отключите JavaScript — и ваша кнопка работать перестанет.
==========================================================================

Хочу выразить благодарность Marat Tanalin за разъяснения. Если честно, я был уверен, что обработчик onclick не использует сам по себе JavaScript.
Теперь сделал кнопку на чистом html вот таким образом:

Паттерн с пунктирными ссылками не раскрыт потому, что это кнопка, а не ссылка. Ничего не мешает оформить кнопки как пунктирные ссылки. Благо паттерн Татьянычем раскрыт ещё до появления

Здравствуйте, воспользовался вашим советом для перехода по ссылке при нажатии на кнопку. Но проблема в том что мне надо сделать так? что ссылка открывалась в новом окне, а старое окно оставалось. У меня сейчас при нажатии на кнопку «Заказать» происходит в том же окне переход на указываемую ссылку. Без JS Можно ли это реализовать при таком коде:

или надо всё это заменить на вот такой код:

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

а можете написать то как это будет выглядеть, а то у меня не получается

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

Хорошая статья. Спасибо большое автору.
Подскажите, пожалуйста, что нужно дописать в этой кнопке, чтобы при переходе ссылка открывалась в новом окне?

Я понимаю, что это делается через target=»_blank», но где и как его прописать правильно, не пойму?
Помогите, пожалуйста!

Ничего не поняла, куда этот target вставлять? Можете написать подробнее?

Сори, увидела в самой записи. Спасибо за помощь!

Перепечатка любых материалов сайта в любом объёме запрещена

Источник

Как добавить HTML-кнопку на сайт: 3 способа + легкий вариант

Варианты от специальных тегов до готовых виджетов

Из этого материала вы узнаете:

А можно поступить еще проще — воспользоваться готовыми виджетами. Мультикнопка будет уместна практически в любых целях — от отправки заявок до покупки билетов и перехода на заданные страницы. Какой способ добавления кнопки на сайт выберите вы?

3 способа добавить HTML-кнопку на сайт

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

Рассмотрим, как добавить HTML-кнопку на сайт разными способами:

Добавление HTML-кнопки на сайт с помощью тега

Различают две разновидности кнопок, для создания которых используется тег& ;button. Это элемент интерфейса для очистки полей форм — reset, а также кнопка, функционал которой определяет соответствующий скрипт.

HTML-кнопку& ; & ;нельзя считать ссылкой. Чтобы установить переход с этого элемента на нужную страницу, применяется тег& ; (кнопке можно придать определенный стиль, используя таблицы стилей CSS).

С помощью элемента интерфейса& ; или тега& ; можно осуществлять отправку форм HTML. В этом случае нужна кнопка типа& ;submit, которая включена в тег HTML-кода формы& ;

Собирайте до 47 заявок
в день с сайта уже через 9 минут

Бесплатно установим конверсионные виджеты на сайт
и дадим бесплатный доступ на 7 дней. Заявки гарантируем 🙂

Собирайте до 47 заявок в день
с сайта, уже через 9 минут

Установите за пару кликов и протестируйте на своём
сайте бесплатно в течение 7 дней. Заявки гарантируем 🙂

Чтобы скачать чек-лист
и забрать бонусы, заполните форму:

Источник