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

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

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

<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>

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Похожие статьи

Популярные статьи:

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

bloggood.ru

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

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

Правильно

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

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>


«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Демо

«Живая» демонстрация такой кнопки-ссылки:

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

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

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

<form action="/example/">
    <input type="hidden" name="foo"   value="bar" />
    <input type="hidden" name="lorem" value="ipsum" />
    <button type="submit">Кнопка-ссылка</button>


Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

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

<form action="/example/">
    <button type="submit">Кнопка-ссылка</button>
</form>

приведёт на адрес /example/? вместо правильного /example/.

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

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

• У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
• Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

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

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

<a href="/example/"><button>Кнопка-ссылка</button></a>

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

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

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

<button>Кнопка-ссылка</button>

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

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

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

Firefox и Chromium

Firefox и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) поддерживают нестандартные префиксированные варианты свойства

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

tanalin.com

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

Непосредственно кнопку нельзя сделать ссылкой, HTML запрещает комбинировать между собой элементы <button> (а также <input>) и <a>. Таким образом нельзя вкладывать кнопку в ссылку, а ссылку в кнопку. Есть три способа, как сделать так, чтобы при щелчке по кнопке происходило открытие веб-страницы.

Использование HTML

Кнопку <button> вкладываем внутрь элемента <form> и для формы указываем атрибут action с адресом веб-страницы (пример 1). Дополнительно можно добавить атрибут target со значением _blank, тогда веб-страница откроется в новой вкладке браузера.

Пример 1. Атрибут action

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <form action="page/new.html" target="_blank">
   <button>Переход по ссылке</button>
  </form>
 </body>
</html>

В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.

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

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от <button> и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn, при добавлении его к элементу <a> ссылка меняет своё оформление.

Пример 2. Стилизация ссылки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   .btn {
    display: inline-block; /* Строчно-блочный элемент */
    background: #8C959D; /* Серый цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 1rem 1.5rem; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    border-radius: 3px; /* Скругляем уголки */
   }
  </style>
 </head>
 <body> 
  <a href="page/new.html">Переход по ссылке</a>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Стилизация ссылки

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick, добавляя его к элементу <button>. Внутри onclick пишем document.location, а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

Пример 3. Событие onclick

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
 </head>
 <body>
  <button>Переход по ссылке</button>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 21.09.2018

Редакторы: Влад Мержевич

webref.ru

Сделать ссылку HTML с оформлением кнопки CSS

<body> ... 
<form>
     <input type="button" value="Просто кнопка"/>     
     <input type="button" value="Ещё одна кнопка"/> 
</form>
 ... </body>

<form>
  <button>...</button>
</form>

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег BUTTON</title>
 </head>
 <body>
  <p><button>Кнопка с текстом</button>
  <button><img src="images/umbrella.gif" alt="Зонтик" 
         > Кнопка с рисунком</button></p>
 </body>
</html>