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

24.03.2023 alexxlab

Содержание

Интернет-агентство 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}

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

schoolsw3.com

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

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

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

Стиль кнопки текста

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

Пример

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

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

Чтобы получить вид «текстовой кнопки», мы удаляем цвет фона и границу по умолчанию:

Пример

. btn {
  border: none;
  background-color: inherit;
  padding: 14px 28px;
font-size: 16px;
cursor: pointer;
  display: inline-block;
}

/* При наведении курсора мыши */
.btn:hover {background: #eee;}

.success {color: green;}
.info {color: dodgerblue;}
.warning {color: orange;}
.danger {color: red;}
.default {color: black;}

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

Текстовые кнопки с индивидуальным фоном

Текстовые кнопки с определенным цветом фона при наведении курсора:

Пример

.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    display: inline-block;
}

/* Зеленый */
.success {
color: green;
}

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

/* Синий */
.info {
color: dodgerblue;
}

. info:hover {
background: #2196F3;
color: white;
}

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

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

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

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

/* Серый */
.default {
color: black;
}

.default:hover {
background: #e7e7e7;
}

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

Зайдите на наш учебник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.

Используйте 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.

Вопросы доступности кнопок

Ссылки и кнопки

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