Css оформление кнопок: Оформление кнопок CSS — скругленные кнопки, Yahoo, Google, Facebook

15.06.1992 alexxlab

Содержание

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

Кратко
Пример
Как пишется
Как понять
Подсказки
На практике
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

alt + ←

→

:in-range, :out-of-range

alt + →

#6 — Кнопки и группы кнопок

itProger

#6 — Кнопки и группы кнопок
Bootstrap HTML5
Кнопки от Bootstrap — одни из наиболее красивых кнопок среди фреймворков. За урок мы научимся использовать стили для создания кнопок, а также изучим создание групп кнопок в Бутстрап.

Исходный код
Работа с кнопками
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap уроки</title> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  <script src="https://maxcdn. bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> body { padding: 30px; } </style> </head> <body> <button>Стандартная</button> <input type="submit" value="Основная"> <input type="button" value="Подтвердить"> <a href="#" role="button">Уведомление</a> <button>Внимание</button> <button>Отмены</button> <button>Сслыка</button> <br><br> <button>Кнопка</button> <button>Кнопка</button> <button>Кнопка</button> <button>Кнопка</button> <br><br> <button>Кнопка</button> <br><br> <button>Кнопка</button> <button>Кнопка</button> <br><br> <div> <div data-toggle="buttons"> <label> <input type="checkbox"> Параметр 1 </label> <label> <input type="checkbox"> Параметр 2 </label> <label> <input type="checkbox"> Параметр 3 </label> </div> <div data-toggle="buttons"> <label> <input type="radio"> Параметр 1 </label> <label> <input type="radio"> Параметр 2 </label> <label> <input type="radio"> Параметр 3 </label> </div> </div> </body> </html>

Онлайн редактор кода
Загрузка. ..
Задание к уроку
Создание кнопок
Создайте группу кнопок как показано на фото ниже:
Посмотреть ответ
Вот решение данной задачи:
<div> <button>Подтвердить</button> <button>Основная</button> <button href="#">Стандартная</button> <button>Отмена</button> </div>

Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
Bootstrap HTML5 Предыдущий Следующий
Также стоит посмотреть
# Веб сайты
Создание блога на Ruby On Rails
8 уроков
# Веб сайты
Видеокурс по PHP, MySQL / Создание динамического сайта
# Веб сайты
Уроки Python Django / Создание сайта
12 уроков
# Веб сайты
Современная вёрстка адаптивного веб-сайта
# Веб сайты
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта. Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.
Хорошо
Настройки
Используйте CSS для оформления кнопок с учетом специальных возможностей
Кнопки служат многим целям на веб-сайтах — есть большие кнопки для наведения курсора на изображения и навигации по веб-странице, а также более тонкие кнопки, используемые для отображения информации о ваших продуктах или услугах.

Однако кнопки могут напугать даже опытных веб-дизайнеров. Кнопки имеют много свойств, на освоение которых может уйти много времени, и они могут привести к излишне большому размеру файлов в вашем CSS, если они используются неправильно или чрезмерно.
В этой статье рассказывается, как применить элегантные стили к кнопкам, чтобы создать привлекательный многоразовый компонент кнопки, готовый к работе. Мы также уделим особое внимание соображениям доступности, которые вы должны учитывать при создании кнопок в 2022 году. Не теряя больше времени, давайте приступим к делу.

Чтобы перейти вперед:
Создание и стиль простой кнопки
Создание и стиль ретро кнопки
Вопросы доступности кнопок
Ссылки и кнопки
Размер кнопки
Использование правильной семантики для кнопок
Клавиатура навигации
Смещение фокуса браузера
Создание и стиль простой кнопки
В этом разделе мы будем стилизовать две кнопки — одну обычную кнопку и одну кнопку в ретро-стиле, обе с анимацией наведения.
Создать кнопку очень просто. Все, что вам нужно сделать, это вставить следующее в ваш HTML-код.
<голова> <мета-кодировка="UTF-8"> Документ <тело>
Я использовал класс btn , но вы можете назвать свою кнопку как хотите. Далее идет более сложная часть: стилизация кнопки. Вот как выглядит нестилизованная кнопка.
Чтобы правильно оформить кнопку, мы нацелимся на класс и внесем некоторые изменения с помощью CSS. Ранее в этой статье мы говорили о том, как создавать и стилизовать базовые кнопки, но сегодня мы рассмотрим их более подробно.
Давайте добавим CSS к нашей кнопке.
.btn { минимальная ширина: 150 пикселей; высота: 50 пикселей; цвет: #fff; отступ: 5px 10px; вес шрифта: полужирный; курсор: указатель; переход: все 0,3 с легкости; положение: родственник; отображение: встроенный блок; контур: нет; радиус границы: 5px; z-индекс: 0; фон: красный; переполнение: скрыто; граница: 2 пикселя сплошного зеленого цвета; черный цвет; }
Теперь кнопка выглядит намного лучше:
Если вы хотите, чтобы ваша кнопка была закругленной, вы можете увеличить радиус ее границы до 25 пикселей.
Вы можете использовать подобную обычную кнопку для своего веб-сайта, но в 2022 году появятся более продвинутые способы оформления кнопок. Одной из самых популярных функций стилизации кнопок является анимация. Комбинируя анимацию CSS с эффектами наведения CSS, вы можете сделать простую кнопку отзывчивой, что сделает ваш сайт более интуитивно понятным и удобным для пользователей. В этой статье более подробно рассматривается анимация кнопок.
Давайте добавим анимацию к нашей кнопке с помощью следующего кода.
.btn:наведите { цвет: #fff; } .btn: hover: после { ширина: 100%; } .btn: после { содержание: ""; положение: абсолютное; z-индекс: -1; переход: все 0,3 с легкости; слева: 0; сверху: 0; ширина: 0; высота: 100%; фон: синий; }
В приведенном выше коде при наведении на кнопку появляется скользящая анимация, которая скользит слева направо и меняет цвет фона на синий. Вы можете просмотреть анимированную кнопку в кодовой ручке ниже:
См. кнопку Pen
Button 1 от fimber elems (@Fimbosky1)
на CodePen.
Если вы хотите, чтобы анимация кнопки двигалась справа налево, просто измените left: 0; от до справа: 0; .
При стилизации кнопки очень важна анимация, поскольку она оживляет компонент. Независимо от того, создаете ли вы большую кнопку призыва к действию или меньшую кнопку для раскрывающегося меню, вы можете проявить творческий подход с анимацией.
Создание и оформление кнопки в стиле ретро
Давайте создадим вторую кнопку с более эстетичным ретро-видом.
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
Вот HTML:

Далее вводим CSS:
.btn2 { минимальная ширина: 130 пикселей; высота: 40 пикселей; цвет: #fff; отступ: 5px 10px; вес шрифта: полужирный; курсор: указатель; переход: все 0,3 с легкости; положение: родственник; отображение: встроенный блок; контур: нет; граница: 1px сплошная #000; цвет: #000; фон: прозрачный; } . btn2: hover: после { сверху: 0; слева: 0; } .btn2: после { содержание: ""; ширина: 100%; z-индекс: -1; положение: абсолютное; высота: 100%; верх: 5 пикселей; слева: 5 пикселей; переход: 0,7 с; цвет фона: #40ff3a; }
Приведенный выше код будет иметь следующий результат:
Если вы хотите поэкспериментировать с этими кнопками, ознакомьтесь с кодовой ручкой ниже.
См. стилизованные кнопки Pen
от fimber elems (@Fimbosky1)
на CodePen.
Вы также можете проверить этот codepen для других красивых кнопок, которые вы можете использовать:
См. анимацию кнопки Candy Color Pen
от Yuhomyan (@yuhomyan)
на CodePen.
Вопросы доступности кнопок
Ссылки и кнопки
Одна из основных проблем, с которыми сталкиваются разработчики, — это незнание того, когда использовать кнопки. Это может звучать глупо, но это реальная проблема, потому что кнопки можно легко заменить ссылками, оформленными в виде кнопок. Хотя это может сработать, это не очень хорошая практика, в первую очередь из-за программ чтения с экрана.
Когда программа чтения с экрана или какое-либо вспомогательное устройство сканирует веб-страницу, она получает информацию о структуре HTML страницы и читает содержимое вслух, поэтому используется элемент ссылки , когда вы должны использовать элемент
Используя базовый HTML, мы создали кнопку.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
заполнение: 20px 35px;
размер шрифта: 16 пикселей;
}
Помимо задания для кнопки определенного отступа, границы и размера шрифта, мы установили цвет фона на розово-коричневый. Вы можете изменить цвет по вашему желанию.
Вывод

Создана кнопка с розово-коричневым фоном.
Если вы хотите добавить цвета только к границе кнопки, используйте свойство границы CSS.
CSS
.btn {
цвет фона: белый;
граница: 2 пикселя, сплошная синяя;
цвет: черный;
отступ: 25px;
размер шрифта: 16 пикселей;
}
В приведенном выше коде мы устанавливаем цвет фона на белый, в то время как сплошная граница имеет длину 2 пикселя и синий цвет.
Вывод

Сгенерирована кнопка с синей рамкой.
Как изменить размер кнопки
Существуют различные способы изменения размера кнопки, и все возможные способы описаны ниже вместе с соответствующими и точными примерами.
Способ 1. Изменение отступов кнопок
Первый и наиболее часто используемый способ изменения размера кнопки — использование свойства padding. Различные отступы приведут к разным размерам кнопки.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
размер шрифта: 16 пикселей;
}
.btn1 {
заполнение: 10px 24px;
}
.btn2 {
заполнение: 32px 16px;
}
Верхняя и нижняя стороны первой кнопки имеют отступы 10 пикселей, а правая и левая стороны имеют отступы 24 пикселя. Что касается второй кнопки, верхняя и нижняя стороны имеют отступы по 32 пикселя каждая, тогда как правая и левая стороны имеют отступы по 16 пикселей.
Вывод

Созданы кнопки с различными отступами.
Способ 2: изменение размера шрифта
Другой способ изменить размер кнопки — изменить размер шрифта кнопки. Увеличение или уменьшение размера шрифта влияет на размер кнопки. Чем больше размер шрифта, тем больше кнопка. Рассмотрим фрагмент кода ниже.
HTML

Здесь мы создали две кнопки, чтобы продемонстрировать разницу между различными размерами шрифта и то, как они влияют на размеры кнопок.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
заполнение: 20px 35px;
}
.btn1 {
размер шрифта: 12px;
}
.btn2 {
размер шрифта: 24px;
}
Обеим кнопкам назначен одинаковый цвет фона, цвет, граница и отступы. Однако для первой кнопки был назначен размер шрифта 12 пикселей, а для другой кнопки — 24 пикселя.
Вывод

Кнопки разных размеров успешно созданы.
Способ 3: изменение ширины кнопок
Другой способ изменить размер кнопки — настроить ее ширину. Следуйте приведенному ниже примеру.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
заполнение: 20px 35px;
дисплей: блок;
поля: 5px 3px;
размер шрифта: 16 пикселей;
}
.btn1 {
ширина: 20%;
}
.btn2 {
ширина: 50%;
}
Для отображения каждой кнопки в новой строке мы преобразовываем их в элементы блочного уровня и устанавливаем их поля. Кроме того, ширина первой кнопки установлена на 20%, а ширина второй кнопки установлена на 50%.
Вывод

Успешно созданы кнопки различной ширины.
Как создать закругленные или круглые кнопки
Чтобы создать закругленные или круглые кнопки, используйте свойство CSS border-radius. Ниже мы представили вам пример.
CSS
. btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
отступ: 25px;
размер шрифта: 16 пикселей;
}
.btn1 {
радиус границы: 8px;
}
.btn2 {
радиус границы: 50%;
}
В приведенном выше коде только для скругления углов кнопки мы задаем значение радиуса границы в пикселях. Однако, чтобы сделать кнопку полной окружностью, мы присвоили радиусу границы значение в процентах.
Вывод

Закругленная и обведенная кнопка была создана с большой легкостью.
Как добавить эффект наведения к кнопкам
Чтобы сделать ваши кнопки более интересными, вы можете добавить к ним эффект наведения, чтобы сделать их внешний вид более привлекательным. Используйте фрагмент кода ниже.
CSS
.btn {
цвет фона: белый;
граница: 2 пикселя сплошная розово-коричневая;
цвет: черный;
отступ: 25px;
размер шрифта: 16 пикселей;
}
. btn:hover {
цвет фона: розово-коричневый;
цвет: белый;
}
Перед эффектом наведения кнопка была оформлена с использованием различных свойств CSS. Между тем, как только пользователь наведет указатель мыши на кнопку, цвет фона изменится на розово-коричневый, а цвет шрифта — на белый.
Вывод
Сгенерирована кнопка с эффектом наведения.
Еще одна забавная вещь, которую вы можете сделать, это указать продолжительность перехода эффекта наведения, чтобы сделать его более привлекательным, используя свойство transition-duration.
CSS
.btn {
цвет фона: белый;
граница: 2 пикселя сплошная розово-коричневая;
цвет: черный;
отступ: 25px;
размер шрифта: 16 пикселей;
длительность перехода: 0,5 с;
}
.btn:hover {
цвет фона: розово-коричневый;
цвет: белый;
}
Длительность перехода установлена на 0,5 секунды.
Выход

Эффект наведения с длительностью перехода успешно добавлен.
Как добавить эффект затухания к кнопкам
Эффекты затухания используются вместе с эффектами наведения и могут быть добавлены к кнопкам с помощью свойства непрозрачности. Вот пример.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
отступ: 30px;
размер шрифта: 16 пикселей;
непрозрачность: 0,4;
длительность перехода: 0,5 с;
}
.btn:hover {
непрозрачность: 1;
}
Перед эффектом наведения непрозрачность кнопки была установлена на 0,4. Принимая во внимание, что когда эффект наведения инициируется, непрозрачность изменится на 1 с продолжительностью перехода 0,5 секунды.
Выход

Эффект затухания реализован успешно.
Как добавить тени к кнопкам
С помощью свойства box-shadow можно добавлять тени к кнопкам, чтобы улучшить их внешний вид. Следуйте приведенному ниже примеру.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
отступ: 30px;
размер шрифта: 16 пикселей;
длительность перехода: 0,5 с;
box-shadow: 0 5px 10px 0 серый;
}
В приведенном выше коде мы добавляем тень серого цвета и присваиваем каждой стороне тени некоторую длину.
Вывод

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

Для стилизации отключенных кнопок можно использовать два свойства CSS: непрозрачность и курсор. Ниже мы продемонстрировали, как можно создать отключенную кнопку.
CSS
.btn {
цвет фона: розово-коричневый;
граница: нет;
цвет: белый;
отступ: 30px;
размер шрифта: 16 пикселей;
длительность перехода: 0,5 с;
непрозрачность: 0,4;
курсор: не разрешено;
}
Чтобы создать отключенную кнопку, непрозрачность кнопки была установлена на 0,4, а курсор был запрещен.
Вывод

Создана отключенная кнопка.
Заключение
Добавление простых кнопок на ваши веб-страницы может быть немного скучным, однако их стилизация с помощью различных свойств CSS может улучшить их общий вид. Такие свойства, как background-color, color, border-radius, opacity, padding, width, box-shadow и т. д., могут пригодиться при придании кнопкам определенного стиля. Помимо этого, вы также можете добавлять к кнопкам различные эффекты, такие как наведение курсора, постепенное появление и т.