Как сделать кнопку ссылкой
Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.
Правильно
Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type="submit":
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.
Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:
<form action="/example/" target="_blank">
Демо
Масштабирование Full HD в 4K без размытияСтрока запроса
Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.
Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:
<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<button type="submit">Кнопка-ссылка</button>
</form>
Данная форма ведёт на страницу /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>
приведёт на адрес /example/? вместо ожидаемого /example/.
Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим спецификациям HTML и URL.
Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.
Ограничения по сравнению с реальной ссылкой
- У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
- Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.
Неправильно
Кнопка внутри ссылки
BUTTON просто помещают внутрь ссылки:<a href="/example/"><button>Кнопка-ссылка</button></a>
Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.
Демо
Расширение для предотвращения размытия изображений на веб-страницах
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
<button>Кнопка-ссылка</button>
Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
Демо
Программа для масштабирования игр без размытия
Нестандартные расширения CSS
Описанные ниже возможности нестандартные, и использовать их не рекомендуется.
Firefox и Chromium
Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance, значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:
A.example {
-moz-appearance:
-webkit-appearance: button; /* Chromium */
}
Демо
Мелодичная инструментальная музыка
Internet Explorer, Edge и спецификация
В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.
Как создать кнопку HTML, которая действует как ссылка?
Почему бы просто не разместить свою кнопку внутри ссылочного тега, например
<a href="https://www.google.com/"><button>Next</button></a>Это, кажется, работает идеально для меня и не добавляет тегов% 20 к ссылке, как вы этого хотите. Я использовал ссылку на Google, чтобы продемонстрировать.
Конечно, вы можете обернуть это в тег формы, но это не обязательно.
При связывании другого локального файла просто поместите его в ту же папку и добавьте имя файла в качестве ссылки. Или укажите местоположение файла, если в не находится в той же папке.
<a href="myOtherFile"><button>Next</button></a>Это также не добавляет никаких символов в конец URL-адреса, однако в нем есть путь к файлу проекта в качестве URL-адреса до окончания имени файла. например
Если бы моя структура проекта была …
.. обозначает папку — обозначает файл, а четыре | обозначить подкаталог или файл в родительской папке
..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
Если я открою main.html, URL будет
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblahТем не менее, когда я нажал кнопку внутри main.html, чтобы перейти на файл second.html, URL-адрес
http://localhost:0000/public/html/secondary.html Никаких специальных символов в конце URL нет. Надеюсь, это поможет. Кстати — (% 20 обозначает пробел в URL, который он закодировал и вставил вместо них.)
Примечание: localhost: 0000, очевидно, не будет 0000, у вас там будет свой собственный номер порта.
Кроме того,? _Ijt = xxxxxxxxxxxxxx в конце URL-адреса main.html, x определяется вашим собственным соединением, поэтому, очевидно, оно не будет равно моему.
Может показаться, что я излагаю некоторые действительно основные положения, но я просто хочу объяснить как можно лучше. Спасибо за чтение, и я надеюсь, что это поможет кому-то по крайней мере. Удачного программирования.
Наложения гиперссылок и кнопок
В выпуске версии 30 были представлены новые относительные параметры для навигации по статьям и страницам. Обратите внимание, что относительные форматы navto поддерживаются только в приложениях версии 30 или более поздней, но можно использовать любой формат фолио (версии 20 или более поздней). Относительные ссылки navto поддерживаются в средствах просмотра для iOS, Android и Магазина Windows, но не поддерживаются в средствах просмотра для настольных ПК и веб-приложениях для просмотра.
Можно использовать различные форматы navto://relative для перехода к следующей, предыдущей, первой или последней статье, а также для сброса фолио. Например, кнопка с действием navto://relative/first позволяет перейти к первой статье в фолио. Допустимые форматы: first, last, next, previous, current и reset. Можно также перейти к определенной статье относительно ее положения в фолио, например к пятой статье.
Пример: navto://relative/last#last (переход на последнюю страницу последней статьи в фолио)
Пример: navto://relative/4 (переход к пятой статье в фолио)
Пример: navto://relative/4#2 (переход к третьей странице пятой статьи в фолио)
Использование формата current особенно полезно для навигации по страницам. Можно использовать #previous, #next, #first, #last для выполнения перехода на определенную страницу, например используйте #3, чтобы перейти к странице 4 статьи.
Пример: navto://relative/current#previous (переход к предыдущей странице статьи)
Пример: navto://relative/current#last (переход на последнюю страницу статьи)
Пример: navto://relative/current#3 (переход к четвертой странице текущей статьи)
Используйте формат navto для создания кнопки, которая осуществляет сброс фолио.
Пример: navto://relative/reset (переход к первой статье и очистка всех положений чтения)
В статьях с плавной прокруткой можно использовать десятичные дроби или проценты для перехода в конкретное место.
Пример: navto://myarticle#3.3 (переход к определенному месту статьи с плавной прокруткой, который отображает нижнюю часть страницы 4 и верхнюю часть страницы 5)
Пример: navto://myarticle#50% (переход к середине статьи с плавной прокруткой)
Чтобы расширить эти возможности относительной навигации navto, можно создать наложение «Веб-содержимое» или статью HTML, которые имеют доступ к Reading API. Например, можно запрашивать фолио для определения такой информации, как количество статей в фолио и количество страниц в статье. Затем можно отобразить эту информацию или использовать ее другим способом в наложении или статье HTML. Дополнительные сведения см. в разделе Новые API-интерфейсы и функции в выпуске версии 30 в центре разработчиков DPS.
Как сделать кнопку на сайте ссылкой. Как создать кнопку для сайта.
Довольно часто в практике web-мастера возникает необходимость в установке на сайте различных кнопок, причем кнопок, нажав на которую посетитель попадет в другой раздел сайта, на другую страницу или даже на другой сайт, т.е. эта кнопка должна работать как ссылка.
Сделать красивую кнопку сейчас можно различными способами и множеством сторонних программ. Один из самых простых, распространённых и часто используемых способов – это создать кнопку в Photoshop и разместить её на сайте.
Кнопка, созданная в каком либо графическом редакторе, например Photoshop – это обычная картинка, сохранённая в одном из графических форматов используемых в web-технологиях: GIF, JPEG или PNG, а следовательно на вставку таких картинок распространяются и все правила вставки изображений в HTML. Не буду тратить время, а сразу приведу пример вставки изображений для кнопки.
1. <img src=”files/img/img.jpg” width=”200″ height=”67″>Поясню, графический файл (картинка кнопка), имеет следующие параметры: имя img.jpg, ширина 200 пикселей, высота 67 пикселей, путь до этого файла (лежит на сайте) files/img/img.jpg.Второй важный момент – это создание ссылки. В примере 2, приведен код текстовой ссылки, которая ведет на главную страницу моего сайта https://www.seoklub.ru/
2. <a href=”https://www.seoklub.ru”>https://www.seoklub.ru/</a>Естественно в якоре ссылки вы можете указать любой нужный Вам текст. А теперь наша задача совместить в коде web-страницы вставку картинки и в качестве якоря ссылки указать не текст а картинку (графический файл) в данном случае это будет наша с Вами кнопка (графический файл img.jpg). 3. <a href=”https://www.seoklub.ru/” target=”_blank”><img src=”files/img/img.jpg” alt=”Главная страница”
width=”200″ height=”67″ border=”0″></a>Теперь сделаем относительную ссылку (относительная ссылка – это ссылка работающая в пределах одного сайта). 4. <a href=”articles.html” target=”_blank”>
<img src=”files/img/stat.jpg” alt=”Статьи сайта seoklub.ru”
width=”200″ height=”67″ border=”0″></a>Вот собственно говоря и всё, естественно у Вас будут свои имена графических файлов, свои ширина и высота картинок, свои пути до этих картинок и конечно же в коде вставки кнопок Вы должны верно указать все эти параметры!
На что еще хочу обатить Ваше внимание. При использовании в качестве якоря ссылок картинки, обязательно добавляйте параметр border=0 иначе вокруг картинки-ссылки будет отображаться рамка, которая во многих случаях очень сильно будет портить дизайн Вашего сайта.
Есть вот такой интересный сервис – dabuttonfactory.com. Этот сервис абсолютно бесплатный. Там можно выбрать разные дизайны кнопочек и сделать на них нужные надписи. Я покажу процесс создания кнопочки на примере.
Удобно то, что в процессе создания кнопочки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.
Первое поле TEXT – вводим здесь текст, который должен быть на кнопке. Например, я ввожу НОВОСТИ. Изменения сразу видны в центре экрана.
Выбираем шрифт Font. Выбираем Sans – serif, Bold – Жирный, Italic – курсив. Отметьте галочкой то, что нужно. Я оставляю Bold, галочку с Italic снимаю.
Size размер шрифта. Плюсиком или минусом можно увеличивать или уменьшать. Я остановилась на 17.
Color – цвет шрифта. Если кликнуть по этому окошку, можно выбрать на палитре нужный цвет. Я оставляю белый. Чтобы палитра свернулась после того, как Вы выбрали нужный цвет, кликните в любую область экрана или нажмите кнопку Escape.
Text Shadow – тень у текста. Distance – расстояние от текста до тени, Color – цвет тени. Пробуйте. Вы будете видеть результат.
Output type – Формат готового варианта. Нам нужна картинка Image, пусть будет в формате jpeg.
Переходим к правой части экрана. Button Type – возможные варианты – круглая, квадратная и с закругленными углами. Я оставила круглую.
Background – фон кнопки. Можно выбрать моноцвет, то есть один цвет, два цвета, градиент – перелив от одного цвета к другому. Соответственно, цвета выбрать рядом. Поэкспериментируйте. Я выбрал градиент от желтого к оранжевому.
Border – граница кнопки, обводка другими словами. Если поставить тут галочку, то нужно выбрать размер границы и цвет. Я этот параметр не включаю.
Shadow – тень кнопки. Также нужно выбрать цвет тени и расстояние от кнопки до тени. Делайте как больше нравится. Я делаю без тени.
Size – размер кнопки. Variable – варьируется в зависимости от длины текста на кнопке. Можно задать интервалы, которые должны быть вокруг текста. Я выбираю Fixed – фиксированный размер (то есть независимо от длинны текста). И задаю ширину – 150 и высоту 50.
Теперь Вам нужно сохранить вашу кнопочку на вашем компьютере. Для этого кликаем по ней. Выскакивает окошко сохранения файла button.jpeg. Дальше Вы уже знаете, что с ней делать – разместить на сайте и превратить картинку в ссылку, которая будет вести посетителя на нужную страницу вашего сайта.
| назад |
HTML кнопка – незаменимый помощник для навигации по сайту
Почти все люди (некоторые больше, некоторые – меньше) любят порядок, потому что порядок – это всегда удобно. Удобно, когда у человека порядок на рабочем столе, на работе, в квартире. И очень удобно, когда заходишь на незнакомый сайт, а там тоже – порядок, всё легко и просто.
Обычно такой порядок называется дружественным (интуитивно понятным) интерфейсом. Html кнопка – это просто незаменимое средство для наведения порядка на сайте и организации дружественного интерфейса.
Кнопки для сайта HTML создаются одним из двух способов:
1. С помощью тега input. Синтаксис такой команды выглядит следующим образом:
<input type="button" value=надпись на кнопке>
2. С помощью тега button:
<button>Надпись на кнопке</button> Пример кода, который выполняет создание кнопки в <b>html</b> сразу двумя этими способами: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> </head> <body> <form> <p><input type="button" value=" Кнопочка1 "></p> <p><button>Кнопочка2</button></p> </form> </body> </html>
В результате получаются две одинаковые кнопки:
Таким образом, хотя получились две абсолютно одинаковые кнопки html, код для них немного разный. Не имеет значения, как создать кнопку в html.
Разница между двумя методами состоит лишь в том, что при использовании тега button – вы можете поместить в контейнер свой набор в виде картинки и текста, и это все будет активно, а при использовании тега input возможно будет использовать либо только картинку, либо только текст.
Но при этом старые версии браузера Internet Explorer могут неправильно отображать современный тег button.
Кнопка со ссылкой HTML (например, кнопка наверх для сайта html или кнопка назад html) может быть создана с помощью ссылок «якорей». Обычный «якорь» имеет следующий вид:
Такой «якорь» невидим и может быть поставлен в любом месте, в котором вы считаете нужным. Для того чтобы перейти к «якорю», используется следующая команда:
<a href="#имя якоря">название кнопки</a>
Нажатие на название кнопки, моментально переводит курсор к «якорю».
Допустим, нам нужно, чтобы внизу сайта стояла кнопка перехода на начало, а в начале – для перехода вниз:
<!DOCTYPE html>
<html>
<head>
<title>Якорь</title>
</head>
<body>
<form>
<a name="top"></a>
<p><a href="#end">вниз</a></p>
…
<p><a href="#top">вверх</a></p>
…
<a name="end"></a>
</form>
</body>
</html>Выглядит это следующим образом:
Кнопки типа Submit существуют для отправки информации, введённой посетителем сайта, на сервер. Например, простейшая организация ввода пароля выглядит так:
<p><input name="login"></p> <p><input type="submit"></p>
Кнопки типа Reset предназначены для обновления данных форм (возврата их в первоначальное состояние). Для того чтобы создать такую кнопку, следует использовать следующий код:
<input type="reset" value="Название кнопки">
В HTML кнопки можно украшать какими-либо картинками. Для этого достаточно использовать следующий код:
<input type="image" src="ссылка на картинку">"
Кнопка с картинкой и текстом:
<button> <img alt="" src="ссылка на картинку" />Нажмите, чтобы посмеяться</button>
Например:
Таким образом, при создании кнопок HTML можно проявить свою выдумку: любые дизайнерские фантазии реализуются написанием достаточно простого кода.
Удачи!
Как в HTML сделать кнопку
Почти на любом сайте есть какие-либо кнопки: отправки формы, перехода, действия.
Выделяют два основных типа кнопок: стандартные и графические.
Стандартные кнопки по умолчанию представляют собой серый прямоугольник с обводкой и текстом, иногда с иконкой, подсвечиваемый при наведении курсора. Есть два способа созданий стандартных кнопок:
- При создании формы через тег <input>.
- При помощи специального тега <button>.
Код кнопки формы выглядит следующим образом:
<form>
<input type=»тип_кнопки» name=»имя_поля_при_необходимости» value=»текст_на_кнопке»/>
</form>
Атрибут type может принимать 3 значения:
- reset — сброс формы к значениям по умолчанию;
- button — используется в основном для активации скрипта;
- submit — для отправки данных формы на сервер;
Для вставки кнопки при помощи тега button, требуется только прописать только сам парный тег и текст кнопки между ним. По желанию можно добавьте иконку в виде растрового изображения и дополнительные атрибуты. Примеры кода простой кнопки и с изображением:
<button>Текст на кнопке</button>
<button src=»имя_файла.png»>Текст на кнопке</button>
При необходимости для изменения стиля кнопки можно к ней применить тег style.
Иногда бывает недостаточно вставить иконку в кнопку и изменить стиль её отображения.
Рассмотрим, как в HTML сделать кнопку, представляющую собой графическое изображение.
Для этого предварительно загрузите на сервер картинку, которую будете использовать, и примените к ней теги img и a, указывающие на изображение и ссылку. Код такой кнопки будет выглядеть следующим образом:
<a href=»ссылка»><img src=»имя_файла.jpg»></a>
Этот вид кнопки неприменим к формам.
Как создать кнопку HTML, которая действует как ссылка | by W3docs
Иногда нам нужно создать кнопку HTML, которая действует как ссылка (т. е. при нажатии на нее пользователь перенаправляется на указанный URL-адрес).
Есть несколько методов, мы представим 3 из них. Выберите один из следующих методов, чтобы добавить ссылку на кнопку HTML.
Хорошо. Пойдем!
a) В тег HTML
Пример:
Заголовок документа
Попробуйте сами
Это может не сработать, если кнопка находится внутри тега
б) В тег внутри элемента HTML
Попробуйте сами
Ссылки не будут работать, когда JavaScript отключен, а поисковые системы могут игнорировать такие вид ссылок.
a) Атрибут действия
Заголовок документа
Попробуйте сами
Чтобы открыть ссылку в новой вкладке, добавьте атрибут target = ”_ blank”.
Заголовок документа
Попробовать себя
Поскольку формы нет и данные не отправлены, это может быть семантически неверным. Однако эта разметка действительна.
б) Атрибут HTML5 formaction.
Пример
Заголовок документа
Попробуйте сами
Атрибут formaction используется только для кнопок с type =» submit » . Поскольку этот атрибут специфичен для HTML5, поддержка в старых браузерах может быть недостаточной.
Пример
Заголовок документа
<стиль>
.кнопка {
background-color: # 1c87c9;
граница: отсутствует;
цвет: белый;
отступ: 20 пикселей 34 пикселей;
выравнивание текста: по центру;
оформление текста: нет; Дисплей
: строчно-блочный;
размер шрифта: 20 пикселей;
поле: 4 пикселя 2 пикселя;
курсор: указатель;
}
Нажмите здесь
Попробуйте сами
Поскольку требуется сложный стиль, он может не работать в некоторых браузерах.
Как создать кнопку HTML, которая действует как ссылка
Тема: HTML / CSSPrev | След.
Ответ: Используйте кнопку «Отправить»
В случае, если у вас нет возможности использовать элемент , вы можете использовать кнопку отправки внутри , где значение атрибута действия установлено на желаемый URL.
Давайте попробуем следующий пример, чтобы понять, как это в основном работает:
Заставить кнопку HTML работать как ссылку
<стиль>
форма {
/ * Чтобы форма оставалась в потоке с окружающим текстом * /
дисплей: встроенный;
}
Однако, если вы можете использовать элемент по своему выбору, вам лучше использовать элемент привязки ( ) и стилизовать его, используя свойства CSS, чтобы он выглядел как кнопка, например:
Сделать HTML-ссылку похожей на кнопку
<стиль>
а.link-btn {
цвет: #fff;
фон: # 337ab7;
дисплей: встроенный блок;
граница: 1px solid # 2e6da4;
шрифт: полужирный, 14 пикселей, Arial, без засечек;
текстовое оформление: нет;
радиус границы: 2 пикселя;
отступ: 6 пикселей 20 пикселей;
}
a.link-btn: hover {
цвет фона: # 245582;
цвет границы: # 1a3e5b;
}
Перейти в Google
Вопросы и ответы по теме
Вот еще несколько часто задаваемых вопросов по этой теме:
HTML-ссылок на кнопки с onclick href
На этой странице показано, как создать ссылки кнопок HTML с помощью onclick и href с использованием тега и стилизовать их с помощью CSS в разные цвета и размеры.
Один из самых простых способов создания ссылок на кнопки HTML — создать HTML , который автоматически сгенерирует кнопку.
Хотя этот метод прост благодаря минимальному количеству кода, кнопка выглядит довольно просто. Однако можно создать великолепно выглядящие кнопки гиперссылок, добавив код CSS.Продолжайте прокручивать, чтобы увидеть примеры.
Это пример того, как оформить ссылку на кнопку с помощью встроенного CSS. Код можно использовать, напрямую вставив его в HTML так же, как в первом примере. При необходимости измените цвет и другие свойства.
Совет: Посетите html-color-names.com.
Если на одном веб-сайте требуется более одной стилизованной кнопки или если вам нужны дополнительные эффекты, такие как изменение цвета при наведении курсора мыши на кнопку, рекомендуется использовать внутреннюю или внешнюю таблицу стилей для более быстрого редактирования нескольких кнопок. однажды. См. Пример ниже ..
Этот код кнопки имеет небольшое, но важное отличие от кнопки с другим стилем, потому что атрибут class был добавлен со значением MyButton , чтобы он мог выбирать правила CSS из таблицы стилей.При необходимости измените значения MyButton .
Вышеупомянутый