Содержание

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

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

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

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

Чтобы перейти вперед:

  • Создание и стиль простой кнопки
  • Создание и стиль ретро кнопки
  • Вопросы доступности кнопок
    • Ссылки и кнопки
    • Размер кнопки
  • Использование правильной семантики для кнопок
    • Клавиатура навигации
    • Смещение фокуса браузера

Создание и стиль простой кнопки

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

Создать кнопку очень просто. Все, что вам нужно сделать, это вставить следующее в ваш HTML-код.

 
<голова>
    <мета-кодировка="UTF-8">
    
    
    
    <center><div class="advv"><ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-1812626643144578"
     data-ad-slot="9935184599"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div></center>Документ

<тело>

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