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

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

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

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

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

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

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

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

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

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

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

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

См. также

• Атрибуты
• Кнопки
• Кнопки
• Кнопки в Bootstrap 4
• Отправка данных формы
• Отправка данных формы
• Построение форм
• Событие onclick
• Создание кнопок
• Создание форм
• Сумасшедшие формы
• Формы
• Формы в Bootstrap 4
• Формы в HTML

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

Есть такой интересный вариант:

Здесь объявляется форма, action которой указывает на страницу редиректа. При нажатии на кнопку происходит переход на заданную страницу. Интересная особенность метода — тут вообще не используется javascript.

Ответил admax
1019 дн., 15 час., 55 мин. назад

Для примера из вопроса этот способ предполагает наличие двух вложенных форм? Одна для сабмита, вторая для редиректа?

Думаю достаточно будет использовать метод GET, всё-таки LINK довольно специфический метод и уверенности в том, что он корректно поддерживается нет

Для примера это конечно не совсем то (именно из-за двух форм), но сам способ достаточно интересный

День добрый, дорогие друзья, пожалуйста, сделайте кнопку что бы он запускала файл на сайте, и другую, что бы закрывала файл. Если что пришлите на почту пожалуйста, или суда.Заранее благодарен(Прошу прислать код).

Повторное использование знаний

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

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Я кнопка 

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Я кнопка 

Атрибут disabled блокирует доступ к кнопке.

Я заблокированная кнопка 

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

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

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

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

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

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

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

   Просто кнопка 

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

 Текст кнопки 

.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >

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

Материалы по теме

• Что такое ссылки и как их ставить
• Как сделать картинку ссылкой
• Шаблон HTML-формы

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

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

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

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

Что такое HTML?

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

Основы разметки

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

Теги обычно идут парами: открывающий тег и закрывающий тег . Например:

Мой заголовок
 
Это мой первый абзац. Привет, мир!
 

Некоторые теги можно не закрывать:

Теги и атрибуты

У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:

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

Формы и элементы форм

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

• — это тег формы.
• action — куда отправляются данные.
• method — метод отправки (обычно get или post ).
• — поле для ввода данных. Тип text означает текстовое поле.
• — метка для поля ввода.

Списки в HTML

Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.

Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

• Элемент списка с маркером
• Еще один элемент с маркером

Ссылки и навигация

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

Таблицы

 
 
Имя
 
Возраст
 
 
Джон
 
30
 
 
Элис
 
25
 
 
 

Использование изображений

Семантическая разметка

Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:

 
 
Заголовок статьи
 
 
Первый абзац статьи.
 
  
 

Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��

• 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

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

• 1 июня 2023

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

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

Правильно

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

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

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

Демо

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

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

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

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

Chromium/ Blink и WebKit

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

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

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

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

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

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

Неправильно

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

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

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

Демо

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

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

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

Демо

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

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

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

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

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

• morontt2013-03-08 Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
• Александр 2013-06-30 Марат, очень помогла ваша статья. Огромное спасибо!
  Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
  Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
  И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
• Никита 2013-11-15 Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
• Marat Tanalin(автор)2013-11-16 Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом). В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
• Наташа 2015-01-22 Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
• Marat Tanalin(автор)2015-01-22 Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег

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

• Наташа 2015-01-22 Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
• thnx 2015-02-05 Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
• ValeriusSoft 2015-05-27 Не работает на движок OpenCart 2.0.2 $uri = $_SERVER[‘REQUEST_URI’];
  $qPos = strpos($uri, ‘?’); if ($qPos === strlen($uri) — 1) header(‘HTTP/1.1 301 Moved Permanently’);
  header(‘Location: ‘ . substr($uri, 0, $qPos));
  >
  ?> Может у вас есть код для .htaccess ?
• Marat Tanalin(автор)2015-05-27 ValeriusSoft, см. новую заметку «Удаляем пустую строку запроса из URL».
• Den 2015-09-11 как привязать код возврата на предыдущую страницу
  к кнопке?
  код кнопки: назад

  За ранее спасибо.

• Marat Tanalin(автор)2015-09-11 Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик. Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :
  • JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
  • пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

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

• Den 2015-09-11 Логично. Спасибо за быстрый ответ. Буду искать другой путь
• Mig 2015-09-16 Спасибо, что просветили! Я тоже сначала сделал не правильно.
• anstrem 2015-09-18 ИМХО правильный способ кнопку все таки ссылкой не делать, а просто визуализировать ссылку в виде кнопки: Оставить отзыв С цветами и стилями только сами поиграйтесь, а то тут какой то ужас стоит 🙂
• Marat Tanalin(автор)2015-09-18 anstrem, такая кнопка будет отличаться внешне от системных кнопок, имеющих оформление, родное (native) для операционной системы.
• Галина 2015-09-28 В html5 , по-моему, можно оформить кнопку-ссылку проще : На главную и не мучиться с настройкой редиректа
• Marat Tanalin(автор)2015-09-28 Галина, такая кнопка не будет работать при выключенном JavaScript. Кстати, ссылка на главную страницу не должна указывать на файл.
• Галина 2015-09-28 автор, согласна.
• Андрей 2015-10-06 Спасибо за подробное описание!
  Но у меня не получилось.
  Вот код (это популярная в сети кнопка)
  

  
  

  
  

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

• Marat Tanalin(автор)2015-10-06 Андрей, скорее всего, JS-логика, привязанная к такой кнопке, зависит от конкретной, заранее определённой HTML-структуры, и с этим ничего не поделать. Для полной уверенности можно попробовать заменить обрамляющую ссылку на форму с тем же атрибутом data-path-hover — если не заработает (скорее всего), то ветер с моря дул не судьба.
• SkyFfs 2015-11-24 Спасибо, помогло! )
• Badrainbow 2015-12-18 Самое логичное решение
• Юлия 2016-03-12 Скажите пожалуйста, а можно ли в этой форме кнопки поменять цвет кнопки и шрифта?
  
  Записаться на консультацию
  
• Marat Tanalin(автор)2016-03-13 Юлия, используйте CSS-свойства background и color .
• Юлия 2016-03-14 Спасибо)
• Сергей 2016-04-27 Добрый день.
  Я только-только начал изучать html.
  Сейчас пытаюсь сделать элементы выпадающего списка ссылками на якоря.Это возможно сделать, используя только html?
  Спасибо.
• Marat Tanalin(автор)2016-04-27 Сергей, если под выпадающим списком подразумевается HTML-элемент SELECT , то средствами статического HTML (без JavaScript) переход с его помощью на якоря не реализовать. Замечу, что в общем случае выпадающий список — не самый удобный способ навигации (например, нет возможности открыть произвольную ссылку в новой вкладке). Если ссылок не очень много, целесообразнее реализовать навигацию в виде UL -списка обычных ссылок.
• Сергей 2016-04-27 Просто было любопытно. Понял Вас, приму к сведению.
  Спасибо за ответ.
• MER11111111 2017-01-10 Всем привет,информация точна и подробная,спасибо автору,но у меня возник вопрос,если у меня сайт разделён фреймами,то как задать условия появления страницы,ссылка которой в кнопке,в определённом фрейме?(у меня на сайте есть верхний фрейм,боковой(там где находится кнопка) и центральный фрейм(в котором и должен появиться файл,который указан ссылкой) )
• Marat Tanalin(автор)2017-01-10 @MER11111111 Для указания окна или фрейма, в который следует загружать ресурс, на который указывает ссылка, предназначен атрибут target , в качестве значения которого в случае фрейма следует указать значение атрибута name соответствующего фрейма. Но на самом деле фреймы как подход давно устарели, вместо них следует использовать шаблонизацию на стороне сервера.
• Dmitriy77 2017-02-11можно не указывать, она по умолчанию submit, достаточно просто
• Marat Tanalin(автор)2017-02-11 Дмитрий, именно поэтому в тексте и написано «в современных браузерах и IE8+ атрибут необязателен».
• Dmitriy77 2017-02-16 У меня сейчас небольшая запара как раз на тему как известно это не поддерживается в браузерах до ie8, можно конечно использовать input, но мне нужно именно button (кнопка с favicon), похоже придётся отказаться от поддержки старых браузеров на своём сайте.
• Marat Tanalin(автор)2017-02-16 Дмитрий, учитывая, что текущая суммарная доля устаревших версий IE вплоть до 10-й включительно составляет всего около 1%, в большинстве случаев можно смело отказываться от поддержки всех версий IE, кроме 11-й , не говоря уж об IE8 с его долей менее 0,3% и IE7 с долей 0,1%, которые не заслуживают внимания уже несколько лет.
• Паша 2018-01-30 Марат у меня вот такая кнопка но ссылка на неё не работает что делать
  .button background-color:#0000ff;
  border: none;
  color: white;
  padding:20px;
  width: 200px; text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size:25px;
  border-radius:8px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  >
  .button:after content: «»;
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
  >
  .button:active:after padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
  > .button:hover background-color: #4CAF50;
  color: white;
  >
  

  123

• Marat Tanalin(автор)2018-01-30 Паша, см. секцию «Правильно» в заметке.
• Максим 2018-02-13 Такой вопрос, при наведении курсора на кнопку, внешность курсора не заменяется на всем принятый указательный палец поднятый вверх (когда наводишь на любую ссылку), есть ли способ как-то сделать это, многие даже не поймут что это ссылка наводя на кнопку)
• Marat Tanalin(автор)2018-02-13 Максим: BUTTON.example cursor: pointer; >
• Сергей 2018-03-04 Badrainbow 2015-12-18 писал:
  Самое логичное решение

  ==================================================================
  СПАСИБО ОГРОМНОЕ Badrainbow! Я не силен в программировании, но кнопку для интернет-магазина на PrestaShop все таки смог перепрограммировать. Вот то, что было изначально: » /> Нужно было сделать так, чтобы при нажатии на кнопку активировался переход по адресу URL. Сначала сделал так: » /> Этот вариант сработал, но мне не хотелось использовать javascript в кнопке. В итоге, благодаря Badrainbow, сделал так: » /> Это работает. Еще раз спасибо Badrainbow.

• Marat Tanalin(автор)2018-03-04
  

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

  • Правильно
    • Демо
    • Строка запроса
    • Chromium/Blink и WebKit
    • Ограничения по сравнению с реальной ссылкой
    • Кнопка внутри ссылки
    • Кнопка с JS-обработчиком щелчка
    • Firefox и Chromium
    • Демо
    • Internet Explorer, Edge и спецификация
    • html,
    • html5,
    • snippets,
    • web-стандарты,
    • избранное,
    • кроссбраузерность,
    • ликбез,
    • семантика,
    • формы
    • Firefox 114
    • Firefox 113
    • Firefox 112
    • Firefox 111
    • Firefox 110
    • Как сделать кнопку ссылкой
    • Правильный DOCTYPE в HTML5
    • Сброс стилей в CSS
    • Отключение Caps Lock в Windows
    • Dell P2415Q. Авторский обзор 4K-монитора
    • Asus PQ22UC — 22″ OLED-монитор 4K
    • Dell UP3017Q — 30″ OLED-монитор 4K

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