Button оформление css: Buttons Основные стили кнопок CSS уроки для начинающих академия

Содержание

Как создавать адаптивные кнопки и блоки в CSS

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «Старт в программировании»

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

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

Кнопки

Создадим кнопку общего назначения:

.button {

/* геометрия элемента */

width: 150px;

height: 20px;

/* отступы между кнопками */

margin-bottom: 5px;

/* центрируем текст кнопки по вертикали */

display: flex;

justify-content: center;

/* центрируем текст кнопки по горизонтали */

text-align: center;

/* чтобы работала геометрия и отступы у тега <a> */

display: inline-block;

/* убираем обводку у тега <a> */

text-decoration: none;

background-color: red;

color: #fff;

}

Примеры использования:

<a href=»#» class=»button»>Отправить резюме</a>

<a href=»/» class=»button»>Очистить форму</a>

Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:

Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {

min-width: 150px;

/* при жесткой высоте будет увеличиваться ширина */

height: 20px;

/* … остальной код без изменения */

}

Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {

поскольку другое значение border-box не задавалось,

нужно подкорректировать размеры

min-width: 140px;

/* при жесткой высоте будет увеличиваться ширина */

height: 20px;

padding: 0 10px;

/* … остальной код без изменения */

}

Код примера

Блоки страницы

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

Пример:

Лучше всего оформить это в CSS так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

</h2>

</div>

.greeting {

/* задаём геометрию */

height: 200px;

padding: 20px;

/* центрируем содержимое по вертикали и горизонтали */

display: flex;

align-items: center;

justify-content: center;

/* учитываем последующее добавление элементов */

flex-direction: column;

background: blue;

}

.greeting__title {

color: #fff;

font-family: Arial;

font-size: 20px;

}

Вот что у нас получилось:

Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера . greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {

/* задаём геометрию */

min-height: 200px;

padding: 20px;

/* код без изменения */

}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {

/* задаём геометрию */

min-height: 40px;

/* тут речь идет только о box-sizing:content-box */

padding: 80px;

/* код без изменения */

}

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

Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

Поздравляю, вы стали обладателем квартиры в Сызрани!

</h2>

</div>

И так тоже не делайте:

.greeting {

/* задаём геометрию */

min-height: 40px;

/* не задаём никакие отступы в родительском элементе */

/* код без изменения */

}

.greeting__container {

margin: 80px;

}

Резюме

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

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще: «10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Оцените статью

Средняя оценка 5 / 5. Всего проголосовало 1

Создание универсальных графических кнопок с помощью CSS

Вольный перевод статьи «Creating bulletproof graphic link buttons with CSS» (мои комментарии — курсивом).

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

Эта кнопка должна:

Автоматически растягиваться горизонтально, чтобы вместить любое количество текста.
Растягиваться горизонтально и вертикально, если объем текста увеличен или если текст разделен на несколько строк.
Иметь размер в разумных пределах.

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

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

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

Реальная кнопка формы (обычно <input type="submit">), работает одинаково хорошо без CSS и JavaScript. Однако, оформленная ссылка для сабмита формы может использовать JavaScript. А последний, как известно, не всегда бывает доступным, поэтому нужно принимать сие обстоятельство во внимание.

Проблемы, как это обычно бывает при работе с CSS, исходят от Internet Explorer. Первая заключается в том, что IE неправильно определяет ширину блочных элементов внутри «плавающих» элементов (имеющих свойство «float»), которым не задана ширина.

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

<div>
  <div><div></div></div>
  <div><div><a href="#">A box</a></div></div>
  <div><div></div></div>
</div>

Когда «плавающему» блоку div.cb не задана ширина, он будет растянут с учетом его содержания. Ширина зависит от содержимого элемента div.i1, и эта часть прекрасно работает. Проблема заключена в элементах

div.bt и div.bb, которые не растягиваются на ту же ширину, что и div.i1. Ее можно было бы обойти, задав ширину элементу div. cb, но нам нужно получить растягивающуюся кнопку, поэтому пришлось искать другое решение.

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

Действительно, мне тоже не раз приходилось сталкиваться с этим багом в Internet Explorer (до 7-й версии), когда при изменении размера окна браузера появляется отступ в 1px, что сразу же бросается в глаза. Наблюдается это как раз в случаях с абсолютным позиционированием.

Результатом явилось вот такое решение для кнопки в виде ссылки, которая содержит четыре вложенных элемента

span:

<a href="#">
  <span>
    <span>
      <span>
        <span>Кнопка-ссылка на CSS!</span>
      </span>
    </span>
  </span>
</a>

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

И конечно нам нужно немного CSS, чтобы сделать наши кнопки привлекательными:

button { /* верхний левый угол, верхняя граница */
  float: left;
  color: #DDD; /* цвет текста */
  background: #333 url(button.gif) no-repeat; /* цвет фона при отключенных изображениях */
  font: 1.2em/1.0 Georgia,serif;
  text-decoration: none;
}
.button * {display:block;}
.button span { /* верхний правый угол */
  padding: 6px 0 0;
  background: url(corners.gif) no-repeat right top;
}
.button span span { /* нижний левый угол, левая и нижняя границы */
  padding: 0 0 0 6px;
  background: url(button.gif) no-repeat left bottom;
}
.button span span span { /* нижний правый угол */
  padding: 0 0 6px;
  background: url(corners.gif) no-repeat right bottom;
}
.button span span span span { /* правая граница */
  padding: 3px 12px 3px 6px; /* отступы от текста */
  background: url(button. gif) no-repeat right center;
}
.button:hover,
.button:focus,
.button:active { /* подсказка для клавиатуры */
  outline: 2px solid #ff0; /* не поддерживается в IE/Win */
  color: #FFF;
}

Можно посмотреть несколько готовых примеров кнопок-ссылок.

Безусловно, в приведенном решении вместо тэга span можно использовать более короткий тэг, например b, тогда и HTML-код, и CSS-код станет компактнее и симпатичнее.

Идеально вид кнопок был бы достигнут при использовании только одного фонового изображения, что и было моей первоначальной целью. Я не сумел достигнуть этой цели и вынужден прибегать к использованию двух изображений (button.gif и corners.gif). Если Вы на них посмотрите, то заметите, что их размер гораздо больше, чем любая кнопка, которая получается в итоге, так как изображения определяют максимальный размер кнопки.

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

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

Готово. Получилась удобная, растяжимая, кликабельная графическая кнопка.

* * *

Работай и зарабатывай на рынке Форекс вместе с компанией FOREX MMCIS group, надежным дилинговым центром мирового уровня. В этом Форекс брокере для вас созданы лучшие условия.

Как настроить кнопку «Отправить»

Хотите настроить кнопку «Отправить», чтобы она лучше соответствовала дизайну или индивидуальности вашего сайта? Кнопка отправки вашей формы может играть важную роль в скорости отправки.

В этом руководстве мы расскажем, как настроить текст и стиль кнопки отправки формы.

Изменение текста кнопки отправки
Стиль кнопки отправки
Настройка стилей наведения
Настройка стилей фокуса
Пример CSS

Изменение текста кнопки «Отправить»

Чтобы изменить текст «Отправить» кнопки формы, откройте в конструкторе форм Настройки » Общие . Здесь вы увидите два поля для установки текста в кнопке отправки:

Текст кнопки отправки : текст, отображаемый, когда эта кнопка еще не нажата
Текст обработки кнопки «Отправить» : Текст, отображаемый после того, как пользователь нажмет эту кнопку, но до того, как пользователю будет показано подтверждение

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

Стиль кнопки отправки

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

Если вы новичок в CSS или хотите освежить свои знания, лучше всего начать с нашего вводного руководства по CSS.

Примечание : Если вы предпочитаете стиль формы без написания кода, ознакомьтесь с нашим руководством по стилю формы, чтобы узнать, как настроить форму в редакторе блоков.

Вот стандартный CSS для кнопки отправки WPForms, а также комментарии, чтобы отметить, что делает каждая строка CSS:

 .wpforms-form input[type=submit],
Кнопка формы .wpforms[type=submit] {
    цвет фона: #eee; /* Серый фон */
    граница: 1px сплошная #ddd; /* Темно-серая рамка */
    цвет: #333; /* Черный цвет текста */
    размер шрифта: 1em; /* Размер текста */
    отступ: 10px 15px; /* Расстояние между текстом и границей */
}

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

Первый шаг — найти шестнадцатеричный код цвета, который нам нужен. Удобные бесплатные инструменты для этого — htmlcolorcodes.com или Adobe Color CC.

Получив шестнадцатеричный код желаемого оттенка желтого, мы можем создать CSS:

 .wpforms-form input[type=submit],
Кнопка формы .wpforms[type=submit] {
    background-color: #FAF243 !важно; /* Желтый фон */
}

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

Далее нам нужно добавить этот CSS на наш сайт. Самый простой способ сделать это — использовать CSS-редактор WordPress. Чтобы открыть это, перейдите к Appearance » Customize и выберите Additional CSS .

Открыв раздел «Дополнительные CSS», вы можете вставить новый CSS, нажать кнопку «Сохранить и опубликовать», и все готово!

Ниже показано, как теперь будет выглядеть наша кнопка с применением этого CSS:

Ваш новый CSS не отображается на вашем сайте? Ознакомьтесь с нашим руководством по устранению этой проблемы.

Настройка стилей наведения

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

Ниже приведен CSS по умолчанию в WPForms при наведении курсора на кнопку. Как отмечено в комментариях, цвет фона становится немного темнее, а цвет границы становится немного светлее:

 .wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
Кнопка .wpforms-form[type=submit]:наведение,
Кнопка .wpforms-form[type=submit]:активна,
.wpforms-form .wpforms-page-button: наведение,
.wpforms-form .wpforms-page-button:active {
    цвет фона: #ddd; /* Более темный серый фон */
    граница: 1px сплошная #ccc; /* Светлая серая рамка */
}

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

Если оставить, например, стили по умолчанию, цвет текста останется черным при наведении курсора на кнопку. Это связано с тем, что цвет текста кнопки обычно черный, и мы не сказали, чтобы он менялся при наведении.

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

 .wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
Кнопка .wpforms-form[type=submit]:наведение,
Кнопка .wpforms-form[type=submit]:активна,
.wpforms-form .wpforms-page-button: наведение,
.wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !важно; /* Более темный желтый фон */
}

Вот как будет выглядеть кнопка с примененным CSS:

Настройка стилей фокуса

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

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

Вот CSS по умолчанию в WPForms, когда кнопка находится в фокусе:

 .wpforms-form input[type=submit]:focus,
Кнопка .wpforms-form[type=submit]:фокус,
.wpforms-form .wpforms-страница-кнопка: фокус {
    цвет фона: #ddd;
    граница: 1px сплошная #ccc;
    курсор: указатель;
}

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

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

 . wpforms-form input[type=submit]:focus,
Кнопка .wpforms-form[type=submit]:фокус,
.wpforms-form .wpforms-страница-кнопка: фокус {
    background-color: #80ccf6 !важно;
}

С применением этого пользовательского CSS кнопка будет выглядеть в фокусе следующим образом:

Пример CSS

Теперь, когда мы рассмотрели основы, давайте рассмотрим полный пример пользовательского CSS для кнопки отправки.

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

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

 /* Новые стили кнопок */
. wpforms-форма ввода[тип=отправить],
Кнопка формы .wpforms[type=submit] {
    отступ: 15px !важно; /* Увеличиваем расстояние между текстом и границей */
    ширина: 100% !важно; /* Сделать кнопку на всю ширину */
    размер шрифта: 1.5em !важно; /* Увеличиваем размер текста */
    background-color: #af0000 !важно; /* Красный фон */
    цвет: #fff !важно; /* Белый текст */
    граница: 8px двойная #860b0b !важно; /* Темно-красная двойная граница */
}

/* Новые стили наведения на кнопку */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
Кнопка .wpforms-form[type=submit]:наведение,
Кнопка .wpforms-form[type=submit]:активна,
.wpforms-form .wpforms-page-button: наведение,
.wpforms-form .wpforms-page-button:active {
    background-color: #860b0b !важно; /* Темно-красный фон */
    граница: 8px двойной #af0000 !важно; /* Красная двойная граница */
}

/* Новые стили фокуса кнопки */
.wpforms-form input[type=submit]:фокус,
Кнопка .wpforms-form[type=submit]:фокус,
. wpforms-form .wpforms-страница-кнопка: фокус {
    цвет фона: красный !важно; /* Темно-красный фон */
    граница: 8px двойная #860b0b !важно; /* Красная двойная граница */
}

Ниже показано, как теперь будет выглядеть наша кнопка с применением этого CSS:

При наведении:

И при фокусировке. Помните, что меняются только цвета фона и границ:

Вот и все! Теперь вы можете настроить кнопку отправки с помощью пользовательского CSS.

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

Как оформить вездесущую кнопку с помощью CSS | от Алисейт

Основы CSS

Создайте 4 обычные кнопки и стилизуйте их в соответствии с их состояниями

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

1. Стили по умолчанию для кнопки
2. Четыре стандартных дизайна кнопок
Я расскажу, как я создаю и стилизую следующие кнопки:
прямоугольная кнопка с закругленными краями края края
круглая кнопка со значком
текстовая кнопка со значком и без него
3. Состояния кнопок
Затем я перейду к различным стилям, которые можно применять к различным состояниям кнопки. Все они могут быть применены к дизайну с 4 кнопками.
Если вы не применяете какой-либо стиль к кнопке, браузер применяет к ней свой стиль по умолчанию.
Поскольку разные браузеры имеют разные стили по умолчанию, вы можете увидеть в своем браузере слегка стилизованную кнопку.
Стили по умолчанию редко сохраняются на веб-сайтах. Вместо этого мы видим различные стили, применяемые к кнопкам, чтобы привлечь к ним внимание и/или передать форму сообщения пользователю.
Прежде чем мы начнем стилизовать, давайте удалим стиль по умолчанию для кнопок.
Прямоугольная кнопка со скругленными краями
Это установочный файл HTML.
Пять элементов-кнопок в HTML
Для начала нам нужно создать форму кнопки с использованием отступов.
Отступы: Отступы добавляются к каждой кнопке с помощью кнопки селектора элементов. Я добавляю padding: 10px 20px , и это сокращение для добавления padding-top: 10px , padding-bottom: 10px , padding-right: 20px и padding-left: 20px 9006. 7 .
padding используется здесь вместо свойств height и width , поэтому мне не нужно позже настраивать стили, чтобы они соответствовали другим кнопкам, которые могут иметь другую длину текста.
Я добавляю контур кнопкам, чтобы увидеть различную степень округлости их краев в результате разных значений border-radius .
Радиус границы: Опять же, радиус границы — это сокращение. Применяя одно значение к радиусу границы, я фактически устанавливаю border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius к этому значению.
Вы можете просмотреть полный код из codepen:
Нажмите «Выполнить перо», чтобы просмотреть код Кнопки-призраки с закругленными краями Чтобы получить кнопку-призрак, я инвертирую цвета, добавляя цвета к цвету и границе свойств вместо background-color . свойство border-radius остается неизменным для всех кнопок. Вы можете просмотреть полный код из codepen: Нажмите «Run Pen», чтобы просмотреть код Квадратные и круглые кнопки со значками Для создания круглых кнопок мне нужен идеальный квадрат в качестве основы. Этого можно добиться, установив для кнопки ширину и высоту одинакового значения. Я больше не использую padding для «дополнения» моей кнопки. После чего я добавляю значение радиуса границы . Чтобы получить круглые кнопки, мне нужно значение, которое составляет не менее 50% моей высоты/ширины. Любое более низкое значение приведет к острым или закругленным краям. Для многослойного эффекта я добавляю свойство box-shadow для каждой кнопки. Это стиль, который я скопировал с сайта, так как мне нравится, как он выглядит на кнопке. Иногда, когда я сталкиваюсь с некоторыми стилями, которые мне нравятся, я проверяю стили, примененные с помощью инструментов разработчика, и сохраняю копию. Иконка, которую я использую, взята из font-awesome. Чтобы использовать его, вам нужно сначала добавить тег скрипта в ваш HTML-файл. Нажмите «Запустить перо», чтобы просмотреть код Текстовая кнопка со значком и без него Наконец, у нас есть текстовая кнопка. Чтобы добавить немного остроты, я также добавил значки рядом с текстом. Это можно сделать, добавив текст после тегов для иконок. Текстовую кнопку создать проще всего, так как стили браузера по умолчанию были удалены ранее. Чтобы содержимое «дышало», я добавляю отступ : 5px . Я также добавляю padding-right: 5px к классу двух значков, которые я использую, чтобы каждый значок был немного отделен от текста. Статическое состояние Статическое/нормальное состояние — это то, что пользователи видят после загрузки веб-сайта. Если вы используете любой из 4 распространенных дизайнов кнопок, приведенных выше, кнопки будут выглядеть в статическом состоянии именно так. Наведение и активные состояния Состояние наведения относится к тому, как выглядит кнопка при наведении на нее курсора. Мне нужно будет добавить псевдокласс :hover . Псевдокласс — это ключевое слово, добавленное к селектору, которое указывает особое состояние выбранных элементов. Существует несколько способов стилизации кнопки при наведении курсора: Аналогично, для активного состояния я добавляю псевдокласс :active . Это представляет состояние, когда элемент в данный момент активируется пользователем (он же щелкнул). Как и прежде, существует несколько способов стилизации. Вы можете увидеть стили, которые я применил ниже: Код для обоих :hover и :активное состояние можно найти в следующем коде: Нажмите «Запустить перо», чтобы просмотреть код Отключенное состояние Последнее состояние, которое я рассматриваю, это :отключено , которое представляет состояние когда кнопка неактивна. Чтобы создать отключенную кнопку, я сначала добавляю disabled в HTML-тег моего html-файла, а затем добавляю стили. Что касается стилей, я затенил кнопку, чтобы отличить ее от кнопки, которую можно нажать, и добавить курсор: не разрешено .