Содержание

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

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

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

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

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

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

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

<link rel="stylesheet" href="link_button.css">
<a href="https://you-hands.ru">Ваша ссылка</a>

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

a{
	padding: 10px 10px;/* отступы от текста до краев */
	text-decoration: none;/* убираем декорирование */
	-moz-appearance: button; /* преобразование для Firefox */
	-webkit-appearance: button; /* преобразование для Chromium */	
}

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

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

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

<a href="you-hands.ru"><img src="button.png"></a>

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

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

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

с блэк джеком и контуром!«.

<link rel="stylesheet" href="link_button_3.css">
<a href="https://you-hands.ru">Ваша ссылка</a>
.ssilka{
	border:1px solid #ccc; /*рамка*/
	background:#eaeaea; /*фон*/
	padding: 10px 10px; /*отступы внутри*/
	text-decoration: none; /*убрать подчеркивание ссылки*/
}

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

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

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

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

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

<form action="https://you-hands.ru" method="GET">
	<button type="submit" >Кнопка как ссылка</button>
</form>

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

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

<script type="text/javascript">
	function GoUrl(url){
		location.href=url;
	}
</script>

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

<button type="submit">Кнопка как ссылка 2</button>

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

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

<button type="submit">Кнопка как ссылка 3</button>

Итоги

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

4.94/5 (8)

Как создать HTML кнопку, которая действует как ссылка

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

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

Добавьте строчный

onclick event¶
  1. к HTML <button> тегу внутри элемента HTML <form>.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <button>Click Here</button>
  </body>
</html>
Попробуйте сами!

Этот пример может не работать, если кнопка находится внутри тега <form>.

  1. к <input> тегу внутри элемента HTML <form>.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <input type="button" value="w3docs"/>
    </form>
  </body>
</html>
Попробуйте сами!

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

Используйте атрибут action или formaction внутри элемента <form>.¶

  1. атрибут action

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>
Попробуйте сами!

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form action="https://www.w3docs.com/" method="get" target="_blank">
      <button type="submit">Click me</button>
    </form>
  </body>
</html>
Попробуйте сами!

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

  1. б. атрибут HTML5 formaction.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <form>
      <button type="submit" formaction="https://www.w3docs.com">Click me</button>
    </form>
  </body>
</html>
Попробуйте сами!

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)¶

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .button {
      background-color: #FF4500;
      border: none;
      color: white;
      padding: 20px 34px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 20px;
      margin: 4px 2px;
      cursor: pointer;
      }
    </style>
  </head>
  <body>
    <a href="https://www.w3docs.com/">Click Here</a>
  </body>
</html>
Попробуйте сами!

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

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

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

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут 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" />
    <input type="hidden" name="lorem" value="ipsum" />
    <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>
</form>

приведёт на адрес /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: button; /* Firefox */
    -webkit-appearance: button; /* Chromium */
}

Демо

Мелодичная инструментальная музыка

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

Ссылки и кнопки — сходства и различия

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

Проблематика

Современный подход к дизайну веб-интерфейсов, зачастую основанный на концепции одновременной адаптации под классические компьютеры и пальцеориентированные (тачскрин) устройства, привёл к тому, что чисто визуально ссылку на плашке путают с кнопкой.

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

Второй момент — возможность повесить на ссылку выполнение javascript привело к тому, что ссылки зачастую и используют как альтернативу кнопкам, что неверно.

При выборе типа элемента необходимо отталкиваться от определения сущности элементов:
Кнопка (html тег <button> ) — это функциональный элемент, то есть элемент, отвечающий за выполнение определённой функции.
Ссылка (html тег <a> ) — это элемент навигации, то есть элемент, отвечающий за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.

Ссылка-кнопка: что будет, если ссылку сделать функциональным элементом?

Ссылке можно задать javascript, который она должна выполнить, то есть из ссылки ( <a> ) при желании можно сделать функциональный элемент — кнопку.

Такая ссылка-кнопка не будет иметь корректного URL-адреса, поэтому при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#».

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

У ссылки нет штатного состояния disabled (заблокирована), характерного для кнопок и отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят кнопку в активное состояние.

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

Кнопка-ссылка: что будет, если кнопку сделать навигационным элементом?

Кнопке можно передавать URL-адрес, то есть сделать из кнопки ( <button> ) ссылку.
Кнопка-ссылка не отобразит URL адрес при наведении на неё курсора мыши.
Кнопка-ссылка не позволит сохранить URL-адрес через контекстное меню.
Кнопка-ссылка не позволит открыть себя в новой вкладке (к примеру, зажав ctrl+левая кнопка мыши).

Правый клик мыши в браузере по ссылке и кнопке

Кнопка или ссылка — решающие правила

Навигация между страницами — ссылка.
Навигация по якорям — ссылка.

Вызов всплывающего окна — чаще кнопка (ссылка, если дублировать всплывающее окно страницей, см. пример далее).
Функция управления, не имеющая своего URL-адреса, — кнопка.

Для примера рассмотрим функцию вызова окна входа на трёх сервисах совместных поездок: beepcar.ru, едем.рф и blablacar.ru.

beepcar.ru — правильно

Функция входа сделана в виде кнопки (хотя внешне похоже на ссылку), которая открывает на этой же странице окно для ввода регистрационных данных.

Кнопка «Войти» в beepcar.ru

едем.рф — неправильно

Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом все прелести ссылки упущены.

Кнопка «Войти» в едем.рф

blablacar.ru — правильно+

Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом у blablacar.ru есть и отдельная страница для входа, ссылка на которую и представлена по ссылке «Войти», то есть остались все прелести ссылки.

Кнопка «Войти» в blablacar.ru

Оформление ссылок и кнопок

Как показывает практика и кнопки, и ссылки могут иметь абсолютно одинаковое оформление (см. выше на примере кнопки и ссылки «Войти»). Всё чаще в навигации ссылки становятся похожи на кнопки за счёт использования плашек-подложек (и так лучше для навигации), в каноническом виде ссылки используются по ходу текста.

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

Классические кнопки для бэкэнда

Некоторые полезные советы по оформлению и использованию ссылок и кнопок можно найти в Контур.Гайды (от СКБ Контур): Ссылка, Кнопка

Ссылки против кнопок в современных веб-приложениях — CSS-LIVE

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон


Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Кнопки

Почему-то люди становятся веб-разработчиками,так и не узнав про HTML-элемент <button>. (Мне и самой потребовалось несколько лет, пока я узнала, для чего нужны заголовки h2-h6, так что бывает). Могучая кнопка и правда крутая. Вот что она может делать:

  • Получать фокус с клавиатуры по умолчанию
  • Делать «клик» по нажатию на пробел
  • Отправлять данные формы на сервер
  • Очищать форму
  • Блокироваться с помощью атрибута disabled
  • Давать подсказку скринридеру с помощью неявного атрибута role="button"
  • Показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Если добавить немного скрипта,кнопка идеальный элемент для:

  • Открывания модального окна
  • Вызова всплывающего меню
  • Переключения интерфейса
  • Проигрывания медиа-контента
  • Вставки с помощью JS в случае, если они работают только с помощью JS

Ссылки

Вот несколько базовых возможностей ссылок, или якорей, или фундамента веба:

  • Создавать гипертекст,  сеть онлайн-ресурсов
  • Перевести пользователя на новую страницу или окно
  • Изменять URL
  • Вызвать браузерные перерисовку/перезагрузку
  • Переходить по якорям внутри страницы
  • Связывать между собой разные части приложения с отрисовкой на клиенте
  • Способны принимать фокус по умолчанию с помощью атрибута href
  • Регистрируют клик с помощью клавиши Enter
  • Имеют неявную роль link
  • Не блокируются как кнопки, но их можно сделать неактивными с помощью tabindex="-1" и aria-hidden="true"
  • Могут открываться в новых окнах (а раньше — и во фреймах)
  • Показывать состояния ∶link, ∶visited, ∶focus, ∶hover, ∶active

Лично для меня самое главное различие между ссылкой и кнопкой — то, что ссылки перемещают пользователя на новый ресурс, унося его из текущего контекста (внутренние ссылки — единственная загвоздка здесь). Кнопка переключает что-то в интерфейсе, например, видео-плеер, или вызывает новый контент в том же самом контексте, например, всплывающее меню, использующее aria-haspopup.

Что такое навигация? А что маршрутизация?

Изменение URL означает, что пользователь переходит на новую страницу. Это перезагружает браузер с новым ресурсом и перерисовывает пиксели. Навигация может вызываться с помощью действий формы, якорных ссылок и JavaScript-свойства location.

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

Откуда возникает путаница?

В мире клиентских веб-приложений построенных с помощью Angular, Ember или React, браузерная перерисовка может вызваться в любой момент. Немного неясно, какой элемент лучше подходит для дела, когда вы можете выполнять тот же код, что для маршрута, но с обработчиком клика кнопки и без изменения URL. К примеру, если я открываю панель над существующим контентом страницы, я перехожу сюда или переключаю интерфейс? Зависит ли это от того, есть ли у этой панели свой собственный URL? Вот код, который я видела недавно:

<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>

По первому впечатлению я посчитала, что это надо заменить на элемент button, поскольку нет значения в href, но есть tabindex="0" и привязка обработчика ng-click. Выглядит очевидно, да? Мне сказали, что он должен оставаться якорем, поскольку «он перенаправляет на внешние ссылки и страницу профиля». Это стало ясно только после изучения JavaScript-кода, который вызывается во многих подобных местах по привязке обработчика ng-click на элементе button. Неужели обязательно надо так глубоко копать, чтобы помочь выбрать правильный элемент?

Если в чисто клиентском приложении фокус обрабатывается правильно, это может не сказаться на пользователе — у ссылки ng-click и tabindex останется по-прежнему неявная роль ссылки. Однако,при декларативном подходе намного лучше было бы использовать заполненный href и маршрутизацию, если якорь перенаправляет пользователя на новый ресурс. Tabindex и события click, привязанные к тегу ссылки — антипатерн разметки, который еще аукнется тем, кто позднее будет писать код и проверять его.

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

Роль UX в разработке доступных приложений

Я скажу это вслух: эта путаница часто начинается с дизайна и UX. Компонент дизайна приходит к нам с прямоугольными кнопками интерфейса, и — потому что так надо — в коде они должны быть ссылками. Где это становится проблемой?

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

Фреймворки, по общему признанию, стирают эту грань и только способствуют выбору неправильного элемента, как в примере с ng-click выше. Можно использовать JavaScript для запуска асинхронной отправки формы на нужном нам элементе (даже без тега <form>, но это еще не повод от него отказываться). Аналогично, можно инициировать изменения представления без маршрутизации, даже если их лучше всего обрабатывать с помощью ссылки. Одни элементы подходят в одном случае, другие — в другом: всё дело в том, чтобы использовать нативные возможности этого элемента по максимуму.

Заметили разницу?

Что можно для этого сделать?

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

В разработке:

  • Если пользователь скринридера перейдет табом на интерактивный элемент, подскажет ли роль этого элемента, чего от него ждать? (Уводит ли он куда-то с текущей страницы? Об этом хорошо бы узнать заранее.)
  • Отключаете ссылочные фичи типа смены URL или правого клика? Подумайте о кнопке.
  • Поддерживайте маршрутизацию в вашем приложении с помощью href, ng-href, и так далее.
  • Навигация по страницам заслуживает изменения заголовка и истории.

Это ещё не конец.

Уверена, что к этой теме придется вечно возвращаться снова и снова, как и все эти годы. Воплощая интерфейс в коде, вам каждый раз придется с трудом выбирать, какой элемент правильный в данном случае… и есть уйма способов сделать одно и то же. И если при этом вы принимаете компетентные решения, то это лучшее, что в ваших силах.

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

P.S. Это тоже может быть интересно:

Как сделать ссылку ВКонтакте в виде кнопки

На чтение 4 мин. Опубликовано Обновлено

Здравствуйте, друзья! Сегодня я вам расскажу, как сделать ссылку ВКонтакте в виде кликабельной кнопки. Для постов ВКонтакте я уже предлагал несколько решений здесь на блоге и на своём видеоканале в YouTube, и эта статья станет хорошим продолжением данной темы. А если Вы примените данный способ на практике, то по достоинству оцените его силу.

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

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

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

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

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

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

Далее, используя свой любимый скриншотер, Вам необходимо очень аккуратно сделать скриншот области, которую занимает серый фон по его внешней границе. Для этого можно использовать даже возможности Яндекс-диска делать скриншоты. Если Вы делаете скриншот не всего экрана сразу, а это самый лучший вариант в данном случае, то контролируйте размеры будущего скриншота. Они должны быть 537х240рх.

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

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

Вам останется только дать создаваемой кнопке название, подобрать цвет надписи и уточнить её расположение. При этом вполне возможно, что потребуется перед набором текста, временно отключить слой созданного прямоугольника.

У Вас получится примерно вот такая красивая кнопочка или даже ещё лучше.

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

Когда кнопки готовы, Вы в процессе работы загружаете нужную кнопку вместо созданного Контактом превью. При этом не нужно регулировать никаких размеров — смело после загрузки нажимаете кнопку «Сохранить изменения», а сам Контакт сделает всё остальное.

У Вас не останется даже намека на серую область, а будет именно кнопка.

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

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

Как это всё делается, Вы можете посмотреть в видео ниже. Первая его часть посвящена описанному выше способу, а вторая — всем остальным.

Если Вам понравилось создание таких кликабельных кнопок для постов ВКонтакте, дайте мне об этом знать в комментариях ниже. Естественно, если остались вопросы, то не стесняйтесь их задать там же. Желаю Вам разобраться во всём без проблем.

С уважением, Сергей Почечуев.

Стилизация ссылок — Изучение веб-разработки

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

Для изучения вам потребуется:Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.

Состояния ссылок

Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:

  • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link.
  • Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited.
  • Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
  • Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus.
  • Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

Вы заметите несколько вещей при изучении стилей по умолчанию:

  • Ссылки подчёркнуты.
  • Не посещённые ссылки синие.
  • Посещённые ссылки фиолетовые
  • Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
  • Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7, прежде чем это будет работать).
  • Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы недолжны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:

  • Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
  • Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

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

  • color (en-US) для цвета текста.
  • cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
  • outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

Обратите внимание: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся. Просто постарайтесь не сходить с ума слишком сильно!

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

Также мы дадим некий пример HTML к которому применяется CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

  • Первые два правила не так интересны в этом обсуждении.
  • Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
  • Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
  • Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
    • Нижнее подчёркивание создано используя border-bottom, а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
    • Значение border-bottom установлено на 1px solid, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
  • Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!

Активное изучение: Стилизуйте ссылки самостоятельно

В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

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

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы <a>, но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

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

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

А теперь наш CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

  • Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
  • Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  • четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
    • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
    • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
    • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

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

css — Как сделать HTML-ссылку похожей на кнопку?

Сильно запоздалый ответ:

Я боролся с этим время от времени с тех пор, как впервые начал работать в ASP. Вот лучшее, что я придумал:

Концепция

: я создаю настраиваемый элемент управления с тегом. Затем в кнопку я помещаю событие onclick, которое устанавливает для document.location желаемое значение с помощью JavaScript.

Я назвал элемент управления ButtonLink, чтобы меня легко запутать с LinkButton.

aspx:

  <% @ Control Language = "VB" AutoEventWireup = "false" CodeFile = "ButtonLink.ascx.vb" Inherits = "controls_ButtonLink"%>

код позади:

  Элементы управления частичным классом_ButtonLink
Наследует System.Web.UI.UserControl

Dim _url как строка
Dim _confirm As String

Публичное свойство NavigateUrl как строка
    Получать
        Возврат _url
    Конец получить
    Установить (значение как строка)
        _url = значение
        BuildJs ()
    Конец набора
Конечная собственность
Публичное свойство подтверждается как строка
    Получать
        Возврат _confirm
    Конец получить
    Установить (значение как строка)
        _confirm = значение
        BuildJs ()
    Конец набора
Конечная собственность
Текст общедоступного свойства в виде строки
    Получать
        Кнопка возврата.Текст
    Конец получить
    Установить (значение как строка)
        button.Text = значение
    Конец набора
Конечная собственность
Общедоступное свойство включено как логическое
    Получать
        Кнопка возврата.
    Конец получить
    Установить (значение как логическое)
        button.Enabled = значение
    Конец набора
Конечная собственность
Публичное свойство CssClass как строка
    Получать
        Кнопка возврата.
    Конец получить
    Установить (значение как строка)
        button.CssClass = значение
    Конец набора
Конечная собственность

Sub BuildJs ()
    Это небольшая путаница в том смысле, что если пользователь дает URL-адрес и подтверждающее сообщение, мы дважды создадим строку onclick.«Но это не так уж важно.
    Если String.IsNullOrEmpty (_url) Тогда
        button.OnClientClick = Ничего
    ElseIf String.IsNullOrEmpty (_confirm) Тогда
        button.OnClientClick = String.Format ("document.location = '{0}'; return false;", ResolveClientUrl (_url))
    Еще
        button.OnClientClick = String.Format ("if (confirm ('{0}')) {{document.location = '{1}';}} return false;", _confirm, ResolveClientUrl (_url))
    Конец, если
Конец подписки
Конец класса

Достоинства схемы: Похоже на контрольную.Вы пишете для него один тег:

Получившаяся кнопка представляет собой «настоящую» кнопку HTML и поэтому выглядит так же, как настоящая кнопка. Вам не нужно пытаться имитировать внешний вид кнопки с помощью CSS, а затем бороться с разными взглядами в разных браузерах.

Хотя возможности ограничены, вы можете легко расширить его, добавив дополнительные свойства. Скорее всего, большинству свойств придется просто «передать» нижележащую кнопку, как я сделал для text, enabled и cssclass.

Если у кого-нибудь есть решение попроще, чище или лучше, я был бы счастлив его услышать. Это больно, но это работает.

Как добавить кнопку HTML, которая действует как ссылка

Существует несколько способов создания кнопки HTML, которая действует как ссылка (т. Е. При нажатии на нее пользователь перенаправляется на указанный URL-адрес). Вы можете выбрать один из следующих методов, чтобы добавить ссылку на кнопку HTML.

Добавить встроенное событие onclick¶

Вы можете добавить встроенное событие onclick в тег Попробуйте сами »

Также можно добавить встроенное событие onclick в тег внутри элемента.

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

: ¶
  

  
     Название документа 
  
  
    <форма>
Попробуйте сами »Ссылки не будут работать, если отключен JavaScript, а поисковые системы могут игнорировать такие ссылки.

Используйте атрибут action или formaction.

Другой способ создания кнопки, которая действует как ссылка, — это использование атрибута action или formaction внутри элемента

.

Пример создания кнопки, действующей как ссылка с атрибутом действия: ¶ 

  

   
       Название документа
Попробуйте сами »

Чтобы открыть ссылку в новой вкладке, добавьте target =" _ blank ".

Пример открытия ссылки с кнопки в новом окне: ¶ 

  

   
       Название документа
Попробуйте сами »

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

Пример создания кнопки, действующей как ссылка с атрибутом formaction: ¶ 

  

   
       Название документа 
   
   
      <форма>
Попробуйте сами »Атрибут formaction используется только с кнопками, имеющими type =" submit ". Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой.

Стиль ссылки как кнопки¶

Добавить ссылку в стиле кнопки со свойствами CSS. Атрибут href является обязательным атрибутом тега . Он определяет ссылку на веб-странице или место на той же странице, по которому пользователь переходит после нажатия на ссылку.

Пример стилизации ссылки как кнопки с помощью CSS: ¶ 

  

  
     Название документа 
    <стиль>
      .кнопка {
        цвет фона: # 1c87c9;
        граница: нет;
        цвет белый;
        отступ: 20 пикселей 34 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        размер шрифта: 20 пикселей;
        маржа: 4px 2px;
        курсор: указатель;
      }
    
  
  
    Нажмите здесь
Попробуйте сами »

Поскольку требуется сложное оформление, это может не работать в некоторых браузерах.

Рассмотрим еще один пример.

Пример оформления ссылки как кнопки: ¶ 

  

  
     Название документа 
    <стиль>
      .кнопка {
        дисплей: встроенный блок;
        отступ: 10 пикселей 20 пикселей;
        выравнивание текста: центр;
        текстовое оформление: нет;
        цвет: #ffffff;
        цвет фона: # 7aa8b7;
        радиус границы: 6 пикселей;
        наброски: нет;
      }
    
  
  
     Тег кнопки HTML
Попробуйте сами »

Как создать кнопку HTML, которая действует как ссылка?

Как создать кнопку HTML, которая действует как ссылка?

Существует несколько методов создания кнопки HTML, которая действует как ссылка. Некоторые из них обсуждаются ниже:
Примечание: Добавление базового свойства CSS к кнопке в каждом методе, чтобы кнопка выглядела лучше.

Примечание: Результат будет одинаковым для всех методов.

Выход:


Ссылка на кнопку начальной загрузки

Введение

Функции кнопок в сочетании с заключенными в них URL-адресами, возможно, являются одним из наиболее важных элементов, позволяющих пользователям взаимодействовать с веб-страницами, а также перемещаться и выполнять различные действия с одной веб-страницы на другую.Особенно в наши дни, в первом мире мобильных устройств, когда минимум половина веб-страниц просматривается с небольших устройств с сенсорным экраном, большие удобные прямоугольные области на экране дисплея, которые легко найти глазами и коснуться пальцем, являются более важными. чем когда-либо. Именно поэтому новый фреймворк Bootstrap 4 эволюционировал, давая еще больший комфорт, отказавшись от очень маленького размера кнопки и добавив немного свободного места вокруг субтитров кнопок, чтобы сделать их еще более удобными и удобочитаемыми для работы.Небольшой штрих, обеспечивающий более дружелюбный внешний вид нового примера кнопок Bootstrap, - это в то же время чуть более закругленные углы, которые вместе с большим свободным пространством вокруг помогают сделать кнопки еще более приятными для глаза.

Семантические классы кнопок Bootstrap Href

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

Количество семантических классов такое же, как и в последней версии, с другой стороны, с некоторыми улучшениями - редко используемые по умолчанию кнопки Bootstrap Buttons Href, которые обычно не имеют смысла, были заменены на гораздо более интуитивно понятные и понятные. тонкий стиль вторичной кнопки, поэтому теперь семантические классы:

Primary .btn-primary - окрашен в голубой цвет;

Info .btn-info - чуть светлее и приятнее синего цвета;

Успех .btn-success старый добрый зеленый;

Предупреждение .btn-warning оранжевого цвета;

Danger .btn-dangerous , который становится красным;

И ссылка .btn-link , которая позволяет стилизовать кнопку как элемент url по умолчанию;

Просто убедитесь, что вы сначала включили основной класс .btn непосредственно перед их применением.

Метки кнопок

Модель .Классы btn созданы для использования с элементом

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

Схема процесса

Сплошной фон без рамки удаляется и заменяется контуром вместе с текстом соответствующей окраски. Уточнение классов действительно очень просто - просто добавьте в схему непосредственно перед назначением правильной семантики, например:

Обведенная основная кнопка становится .btn-outline-primary

Общая вторичная - .btn-outline-secondary и так далее.

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

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

Подробнее

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

Размер пуговиц

Запишите кнопки уровня блока - те, которые охватывают всю ширину родительского элемента - путем добавления .БТН-блок .

Активный режим

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

Отключенные кнопки, использующие элемент , действуют немного иначе:

- -s не поддерживают отключенный атрибут, поэтому вам нужно будет добавить .disabled , чтобы визуально он выглядел отключенным.

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

- Отключенные кнопки должны включать атрибут aria-disabled = "true" , чтобы указать состояние компонента для вспомогательных технологий.

   Основная ссылка 
 Ссылка

Предупреждение об эффективности ссылки

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

Переключить компонент

Еще кнопки: флажок плюс радио

Отмеченное состояние для этих кнопок обновляется только через событие щелчка на кнопке.

Имейте в виду, что предварительно отмеченные кнопки требуют, чтобы вы вручную добавили класс .active к входу .

  

  <метка>
     Флажок 1 (предварительно установлен)
  
  <метка>
     Флажок 2
  
  <метка>
     Флажок 3
  

  
  

  <метка>
     Радио 1 (предварительно выбрано)
  
  <метка>
     Радио 2
  
  <метка>
     Радио 3

Методы

$ ().кнопка ('toggle') - переключает статус нажатия. Придает кнопке вид, что она была включена.

Заключительные мысли

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

Посмотрите несколько обучающих видео на YouTube о кнопках Bootstrap

Связанные темы:

Кнопки начальной загрузки Официальные документы

W3schools: учебник по кнопкам начальной загрузки

Кнопка переключения начальной загрузки

Как создать кнопку HTML, которая действует как ссылка | by W3docs

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

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

Хорошо. Пошли!

a) В тег HTML

Попробуйте сами

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

б) В тег внутри элемента HTML.

Пример 

  
  
  
  Заголовок документа

Попробуйте сами

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

a) Атрибут действия

  
  
  
  Заголовок документа

Попробуйте сами

Чтобы открыть ссылку в новой вкладке, добавьте атрибут target = ”_ blank”.

  
  
  
  Заголовок документа

Попробовать себя

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

b) Атрибут HTML5 formaction.

Пример 

  
  
  
  Заголовок документа

Попробуйте сами

Атрибут formaction используется только для кнопок с type =” submit ” . Поскольку этот атрибут специфичен для HTML5, поддержка в старых браузерах может быть недостаточной.

Пример 

  
  
  
  Заголовок документа  
 <стиль> 
.кнопка {
 background-color: # 1c87c9; 
 граница: отсутствует; 
 цвет: белый; 
 отступ: 20 пикселей 34 пикселей; 
 выравнивание текста: по центру; 
 оформление текста: нет; 
 дисплей: строчно-блочный; 
 размер шрифта: 20 пикселей; 
 margin: 4px 2px; 
 курсор: указатель; 
} 
  
  
  
  Нажмите здесь

Попробуйте сами

Поскольку требуется сложный стиль, он может не работать в некоторых браузерах.

Кнопки · Bootstrap

Используйте настраиваемые стили кнопок Bootstrap для действий в формах, диалоговых окнах и т. Д. С поддержкой нескольких размеров, состояний и т. Д.

Примеры

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

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный Ссылка на сайт
Передача смысла вспомогательным технологиям

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

Классы .btn предназначены для использования с элементом

Контурные кнопки

Нужна кнопка, но нет богатых цветов фона, которые они приносят? Замените классы модификаторов по умолчанию на .btn-outline- * для удаления всех фоновых изображений и цветов на любой кнопке.

Начальный Вторичный Успех Опасность Предупреждение Информация Свет Темный

Размеры

Хотите кнопки большего или меньшего размера? Складываем .btn-lg или .btn-sm для дополнительных размеров.

Большая кнопка Большая кнопка

Маленькая кнопка Маленькая кнопка

Создайте кнопки уровня блока - те, которые охватывают всю ширину родительского элемента - путем добавления .БТН-блок .

Кнопка уровня блокировки Кнопка уровня блокировки

Активное состояние

Кнопки будут отображаться нажатыми (с более темным фоном, более темной рамкой и вставкой тени), когда они активны. Нет необходимости добавлять класс к

Отключенные кнопки, использующие элемент , ведут себя немного иначе:

   Основная ссылка 
 Ссылка
Предупреждение о функциональности ссылки

Модель .disabled class использует pointer-events: none , чтобы попытаться отключить функциональность ссылок s, но это свойство CSS еще не стандартизировано. Кроме того, даже в браузерах, которые действительно поддерживают события указателя : нет , навигация с клавиатуры остается неизменной, а это означает, что зрячие пользователи клавиатуры и пользователи вспомогательных технологий по-прежнему смогут активировать эти ссылки. Чтобы быть в безопасности, добавьте к этим ссылкам атрибут tabindex = "- 1" (чтобы они не получали фокус клавиатуры) и используйте собственный JavaScript, чтобы отключить их функциональность.

Плагин кнопки

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

Переключение состояний

Добавьте data-toggle = "button" , чтобы переключить активное состояние кнопки. При предварительном переключении кнопки необходимо вручную добавить .active class и aria-Press = "true" к

Флажок и переключатели

Bootstrap .Стили кнопки могут быть применены к другим элементам, таким как s, для обеспечения переключения флажка или переключателя стиля радио. Добавьте data-toggle = "buttons" к .btn-group , содержащему эти измененные кнопки, чтобы включить их поведение переключения через JavaScript, и добавьте .btn-group-toggle для стилизации s в вашем кнопки. Обратите внимание, что вы можете создавать кнопки с питанием от одного входа или их группы.

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

Обратите внимание, что предварительно отмеченные кнопки требуют, чтобы вы вручную добавили класс .active к входу .

  

  <метка>
     установлен
  

  
  

  <метка>
     Активен
  
  <метка>
     Радио
  
  <метка>
     Радио

Методы

Метод Описание
$ ().кнопка ('переключение') Переключает состояние push. Придает кнопке вид, что она была активирована.
$ (). Кнопка ('удалить') Уничтожает кнопку элемента.

HTML-кнопки, ссылки с onclick href

На этой странице показано, как создавать ссылки кнопок HTML с onclick и href с использованием тега

и стилизовать их с помощью CSS в разных цветах и ​​размерах.

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



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

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



Совет: Посетите html-color-names.com или htmlColorCodes.org для сопоставления цветовых палитр.

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

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





Вышеупомянутый