Стиль html кнопки: Делаем стильные кнопки | htmlbook.ru

Leave a Comment / Html / By /

Кнопки. Компоненты · Bootstrap. Версия v4.0.0

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

Примеры

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

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

<button type="button">Линк</button>
Использование вспомогательных технологий

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

Тэг «кнопка»

Классы .btn созданы для использования с элементом <button>. Однако их также можно использовать внутри <a> или <input> (хотя из-за этого некоторые браузеры могут рендерить это немного иначе).

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

<a> атрибут role="button" для правильного поведения в случае применения вспомогательных технологий таких как «экранная читалка».

Link 

<a href="#" role="button">Link</a>
<button type="submit">Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Контурные кнопки (без фона)

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

<button type="button">Главный</button>
<button type="button">Вторичный</button>
<button type="button">Успех</button>
<button type="button">Опасность</button>
<button type="button">Предупреждение</button>
<button type="button">Инфо</button>
<button type="button">Светлый</button>
<button type="button">Темный</button>

Размеры

Нужно изменить размеры кнопки? Добавьте в нее классы .btn-lg или .btn-sm для получения дополнительных размеров.

<button type="button">Большая кнопка</button>
<button type="button">Большая кнопка</button>
<button type="button">Маленькая кнопка</button>
<button type="button">Маленькая кнопка</button>

Создайте кнопки блочного уровня – которые занимают полную ширину родительского элемента – добавлением класса

. btn-block.

<button type="button">Кнопка блочного уровня</button>
<button type="button">Кнопка блочного уровня</button>

Когда кнопки нажимают, появляется более темный фон, границы и внутренняя тень. В BS4 нет необходимости добавлять класс в <button>, т.к. тут используется псевдо-класс. Однако вы можете вызвать «активное» поведение и соответствующий внешний вид, добавив класс .active (и включив атрибут aria-pressed="true") , когда необходимо прямо объявить такое поведение.

Главная ссылка Ссылка 

<a href="#" role="button" aria-pressed="true">Главная ссылка</a>
<a href="#" role="button" aria-pressed="true">Ссылка</a>

Заставьте кнопки выглядеть «неактивными» добавлением булеанова атрибута disabled к любому элементу <button>.

<button type="button" disabled>Главная кнопка</button>
<button type="button" disabled>Кнопка</button>

«Отключенные» кнопки, созданные из элемента <a>, ведут себя немного иначе:

  • Элемент <a> не поддерживает атрибут disabled, так что для соответствующих свойств вместо него надо добавлять класс .disabled;
  • Некоторые future-friendly стили, которые поддерживаются не всеми юзер-агентами, (т.е. «возможно будут поддерживаться в будущем») включены в <a> для отключения всех событий pointer-events
    на кнопках-якорях. В браузерах, которые поддерживают это свойство, вы вовсе не увидите деактивированный курсор.
  • Отключенные кнопки должны содержать атрибут aria-disabled="true" для указания вспомогательным технологиям состояния элемента.

Главный линк Линк 

<a href="#" role="button" aria-disabled="true">Главный линк</a>
<a href="#" role="button" aria-disabled="true">Линк</a>
Оговорка о некоторых аспектах функциональности ссылок

Класс . disabled использует pointer-events: none для попытки деактивации ссылочной функциональности <a>, но это свойство CSS еще не полностью стандартизовано. В дополнение, даже в браузерах, поддерживающих свойство pointer-events: none, при навигации с клавиатуры пользователи клавиатур для слабовидящих и иных вспомогательных технологий могут нечаянно пройти по данной ссылке. Так что для полной «безопасности» добавляйте в эти ссылки атрибут

tabindex="-1" (для предотвращения возможности «нахождения» их с клавиатуры) и используйте обычные скрипты JavaScript для деактивации их функциональности.

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

Контролируйте состояния кнопок или создавайте группы кнопок для компонентов, таких как «тулбары».

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

Добавьте data-toggle="button" для переключения на активное состояние кнопки. Если вы делаете это, вы должны вручную добавить в <button> класс . active и aria-pressed="true".

<button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">
  Одиночный переключатель
</button>

Переключатели («галочки») и «кнопки радио»

Стили классов .button могут применяться к прочим элементам, таким как <label>, для создания переключателей («галочек») или «кнопок радио». Добавьте data-toggle="buttons" к классу .btn-group, содержащему эти измененные кнопки, для включения «переключателей» в их соответствующих стилях.

Состояние выбора (т.е. когда ставится «галочка») обновляется лишь событием клика click по кнопке. Если вы используете другой метод для обновления ввода – например <input type="reset"> или вручную применяя свойство ввода checked – вам потребуется вручную применить класс . active к <label>.

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

.active к элементу ввода <label>.

Checked 

<div data-toggle="buttons">
  <label>
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

Active Radio Radio 

<div data-toggle="buttons">
  <label>
    <input type="radio" name="options" autocomplete="off" checked> Active
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
  <label>
    <input type="radio" name="options" autocomplete="off"> Radio
  </label>
</div>

Методы

Метод Описание
$(). button('toggle') Задействует состояние «нажатия». Дает кнопке вид активированной (нажатой) кнопки.
$().button('dispose') Уничтожает кнопку элемента (в элементе).

Раздел «Кнопка» — База знаний Webim

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

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

Раздел «Кнопка»

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

Настройки HTML-кнопки:

  • Цвет фона кнопки — изменяет цвет фона чата. В настройках размещения сохраняется как параметр button.html.style.background-color.

  • Цвет границы кнопки — изменяет цвет границы кнопки. В настройках размещения сохраняется как параметр button.html.style.border-color.

  • Цвет изображения кнопки — изменяет цвет изображения кнопки. В настройках размещения сохраняется как параметр button.html.style.image-color.

  • Возможность перемещения кнопки — параметр разрешает или запрещает пользователю перемещать кнопку на сайте с помощью drag-n-drop. В настройках размещения сохраняется как параметр button.html.draggable.

  • Горизонтальное положение кнопки — изменяет стандартное положение кнопки чата по горизонтали.

  • Вертикальное расположение кнопки — изменяет стандартное положение кнопки чата по вертикали.

Чтобы загрузить своё готовое изображение кнопки, которое вы хотите использовать, нажмите Загрузить свою кнопку. В появившемся окне загрузите с устройства файл с изображением кнопки в одном из следующих форматов: jpg, gif, png, jpeg, svg. Размер кнопки не должен превышать 10 Мб. Также осуществите следующие настройки кнопки:

  • Тип кнопки: укажите, должна кнопка быть обычной, выдвигающейся или угловой

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

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

Системные кнопки
Стандартные кнопки сервиса Webim. В следующей таблице представлены все варианты изображений стандартных кнопок.

Изображение онлайн-кнопкиИзображение офлайн-кнопки

Форма HTML-кнопки Атрибут

❮ HTML-тег

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

Определение и использование

Атрибут формы определяет форму, которой принадлежит кнопка.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

Поддержка браузера

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

Атрибут
форма 10,0 16,0 4,0 5. 1 9,5

Синтаксис