Как создать контур кнопок

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Вперед ❯

Узнать, как стилизовать кнопки контура с помощью CSS.

Контур кнопок

Редактор кода »

Создать контур кнопок

Шаг 1) Добавить HTML:

Пример

<button>Успех</button>
<button>Информация</button>
<button>Предупреждение</button>
<button>Опасность</button>
<button>По умолчанию</button>

Шаг 2) Добавить CSS:

Пример

.btn {
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Зеленый */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Синий */
. info {
  border-color: #2196F3;
  color: dodgerblue
}

.info:hover {

  background: #2196F3;
  color: white;
}

/* Оранжевый */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Красный */
.danger {
  border-color: #f44336;
  color: red
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Серый */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}

Редактор кода »

Добавить свойство border-radius для создания кнопок округлого контура:

Пример

.btn {
  border-radius: 5px;

}

Редактор кода »

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

❮ Назад Вперед ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

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

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

:disabled, :enabled — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.

Легко применяются к любым элементам, которым можно задать атрибут disabled: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> и <input>.

Пример

Скопировано

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

. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled.

Кнопка будет полупрозрачной:

button:disabled {    opacity: 0.5;}
          button:disabled {
    opacity: 0.5;
}

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

Как пишется

Скопировано

Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled.

Как понять

Скопировано

Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.

Подсказки

Скопировано

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

💡 enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input, вы закрываете сценарий с активным элементом.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом

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

Код для кнопки из моего последнего проекта:

Стили для активной кнопки в обычном состоянии:

.additional-btn {  padding: 2rem 3rem;  border: 1px solid currentColor;  font-family: inherit;  font-size: 1.6rem;  color: #FF6650;  text-decoration: none;  background-color: transparent;  transition: border 0.3s, color 0.3s;  cursor: pointer;  user-select: none;}
          
 
.additional-btn {
  padding: 2rem 3rem;
  border: 1px solid currentColor;
  font-family: inherit;
  font-size: 1.6rem;
  color: #FF6650;
  text-decoration: none;
  background-color: transparent;
  transition: border 0.3s, color 0.3s;
  cursor: pointer;
  user-select: none;
}

Стили для кнопки при наведении курсора или клике:

.additional-btn:active,.additional-btn:hover {  color: #FF5050;  transition: none;}
          .additional-btn:active,
.additional-btn:hover {
  color: #FF5050;
  transition: none;
}

Стили для кнопки, когда она неактивна:

.
 
 additional-btn:disabled {  cursor: default;  color: #A44234;}
          .additional-btn:disabled {
  cursor: default;
  color: #A44234;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:checked

ctrl + alt + ←

→

:in-range, :out-of-range

ctrl + alt + →

кнопок · Bootstrap

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

Примеры

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

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

Бирки для кнопок

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

<тип ввода="кнопка" значение="Ввод">

Кнопки контура

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

Размеры

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

Создайте кнопки уровня блока — те, которые охватывают всю ширину родителя — путем добавления .btn-block .

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

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

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

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

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

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

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

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

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

Примечание. При использовании элемента

Типы кнопок

По умолчанию

Используйте стандартные — но стильные — . btn для действий формы и общих действий страницы. Они широко используются на сайте.

Основные

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

Outline

Кнопки Outline преуменьшают действие, поскольку они выглядят как прямоугольные ссылки. Просто добавьте .btn-контур и вперед.

Опасность

Кнопки опасности красные. Они помогают повторить, что предполагаемое действие важно или потенциально опасно (например, удаление репо или передача права собственности). Подобно основным кнопкам, просто добавьте .btn-danger .

Selected

Добавление атрибута aria-selected="true" сохранит кнопку в выбранном состоянии. Обычно используется для BtnGroups .

<дел>

<дел>

Отключено

Отключено

Варианты кнопок

Размеры

Далее к размеру по умолчанию есть еще .btn-sm (маленький) и .btn-large 9вариант 0014. Используйте их, чтобы уменьшить или увеличить размер кнопки. Это полезно для установки кнопки рядом с входом или превращения кнопки в заметный призыв к действию в основных разделах.

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

Использование .btn-large с утилитой масштабирования шрифта для преобразования текста в больший размер.

<дел> Большая кнопка со ссылкой