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

Leave a Comment / Css / By /

: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 + →

Интернет-агентство BINN » Дизайн кнопок веб-сайта: руководство по CSS. Часть 2

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

В 1-ой части нашей статьи мы рассказали вам о хорошем и плохом дизайне кнопок, поделились бесплатными шаблонам, а также научили создавать кнопки в CSS.

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

Дизайн кнопок CSS

Этот код создает простую синюю кнопку, с которой пользователи могут взаимодействовать на сайте. Здесь есть строка HTML, с помощью которой этот код начинает работать. 

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

  • Цветные кнопки;

Используйте свойство background-color, чтобы изменить цвет фона вашей кнопки.

  • Закругленные углы;

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

  • Цветные границы;

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

Используйте селектор :hover, чтобы стиль вашей кнопки менялся при наведении на нее указателя мыши. Используйте свойство transition-duration, чтобы изменить способ работы эффекта наведения.

  • Кнопки-тени;

Используйте свойство box-shadow, чтобы добавить тень вашей кнопке. 

  • Отключенные кнопки.

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

Инструменты для создания кнопок 

Если у вас слишком много кнопок на сайте, вы можете использовать специальные инструменты, которые помогут вам упростить процесс создания кнопок. Ниже мы рассмотрим некоторые из них: 

Wix — это платная платформа CMS, которая упрощает веб-дизайн, благодаря красивым и интуитивно понятным функциям. С Wix вы не получите полную настройку кнопок, но в любом случае этот инструмент упрощает процесс их создания.  

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

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

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

При окончании редактирования нажмите кнопку «Получить код», чтобы скопировать и вставить свой код в поле «Настроить дополнительный CSS» на своем веб-сайте.

CSS Button Generator — это бесплатный и простой в использовании инструмент для создания красивых кнопок с призывом к действию. В нем есть все основные функции, а также возможность настройки кнопки при наведении курсора.

Источник: hubspot.com

 

Как настроить кнопку отправки с помощью CSS

  • Руководство пользователя Jotform
  • Как создавать лучшие формы
  • Как настроить кнопку отправки с помощью CSS

Последнее обновление:

Идентификатор сообщения

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

Изменение внешнего вида кнопки отправки

  1. В Конструкторе форм щелкните значок Конструктор форм .
  2. Перейдите на вкладку Стили .
  3. Прокрутите вниз до раздела Внедрить пользовательский CSS .
  1. Примените собственные правила CSS или используйте следующий код:
 .form-submit-button {
фон: #0066A2;
белый цвет;
стиль границы: начало;
цвет границы: #0066A2;
высота: 50 пикселей;
ширина: 100 пикселей;
шрифт: жирный, 15px, arial, без засечек;
тень текста: нет;
}

Вот как это будет выглядеть потом:

Детали кода CSS для кнопки отправки

  • .form-submit-button — селектор кнопки отправки в вашей форме.
  • фон – устанавливает цвет фона за текстом.
  • цвет – определяет цвет вашего текста.
  • border-style — устанавливает стиль границ кнопки отправки.
  • border-color — устанавливает цвет границ кнопки отправки.
  • height — устанавливает высоту вашей кнопки и указывается в пикселях.
  • ширина – устанавливает ширину вашей кнопки и указывается в пикселях.
  • шрифт – устанавливает свойства шрифта.

ПРИМЕЧАНИЕ. Не забудьте добавить точку с запятой (;) после каждого свойства.

Submit Button Hover Effect

Перейдите к разделу Inject Custom CSS в конструкторе форм, используя шаги, описанные выше, и введите следующий код:

 .form-submit-button {
фон: #B9DFFF;
цвет: #fff;
граница: 1px сплошная #eee;
радиус границы: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}
.form-submit-button: hover {
фон: #016ABC;
цвет: #fff;
граница: 1px сплошная #eee;
радиус границы: 20px;
box-shadow: 5px 5px 5px #eee;
тень текста: нет;
}

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

Детали каждого кода CSS3 для кнопки отправки

  • .form-submit-button:hover — это класс, когда мышь наводится на кнопку отправки. Все остальные поля остаются прежними, за исключением фона, чтобы показать, что происходит при наведении мыши.
  • border-radius — закругляет угол ваших кнопок отправки.
  • box-shadow — устанавливает тень для кнопки отправки.
  • text-shadow — устанавливает тень для текста внутри кнопки отправки (не применяется к примеру).

Как дела? Пожалуйста, поделитесь своими мыслями или предложениями в разделе комментариев ниже.

Было ли это руководство полезным?

Нам очень жаль это слышать. Какая проблема у вас была с гидом?

Категория обратной связи Не ответил на мой вопросСлишком сложныйУстаревший Проблема с переводомПроблема с образцом/кодомДругое

Как мы можем улучшить это руководство?

Используйте 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 страницы и читает содержимое вслух, поэтому используется элемент ссылки , когда вы должны использовать элемент

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *