Кнопка, на которую хочется нажать

Урок 1.3 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно

Цель урока: Собрать кнопку: надпись, цвет, скругление, отступы, размер и состояние наведения.

Нужно знать заранее: Урок 1.2

Объяснение

Зачем это нужно: Кнопка — самый важный элемент интерфейса. По ней человек решает, продолжать или нет. Кнопка, по которой трудно попасть и которая выглядит как серая полоска, теряет нажатия. Поэтому кнопку не просто «ставят», а настраивают.

Как это работает: Сама кнопка — это тег <button> с надписью внутри: <button>Играть</button>. Оформление задаётся отдельным блоком — правилом CSS. Оно состоит из селектора (что выбираем) и списка настроек в фигурных скобках: button { background: #4f46e5; color: white; border: none; border-radius: 12px; padding: 12px 24px; font-size: 18px; cursor: pointer; } Здесь background — цвет фона, color — цвет текста, border — рамка, border-radius — скругление, padding — внутренний отступ, font-size — размер текста, cursor — вид курсора. Настройки разделяются точкой с запятой.

Пример с разбором: Серая кнопка по умолчанию имеет фон цвета «buttonface» и внутренний отступ в один пиксель — по ней неудобно попадать. Мы задаём свой цвет, скругление 12 пикселей и отступ 12 пикселей сверху и снизу. Высота кнопки получается около 50 пикселей — по ней легко попасть пальцем.

Разбор по шагам: 1. Напишите <button>Играть</button>. 2. Добавьте <style> и правило button { … }. 3. Внутри задайте background, color, border, border-radius, padding, font-size. 4. Добавьте cursor: pointer — курсор станет «рукой». 5. Добавьте button:hover с чуть другим фоном — кнопка отзовётся на наведение. 6. Проверьте, что текст читается на фоне.

Частая ошибка: Поменять только цвет и забыть про отступы. Кнопка с фоном, но с текстом, прижатым к краям, выглядит сломанной. Вторая ошибка — белый текст на светлом фоне: надписи не видно. Третья — кнопка меньше 44 пикселей по высоте: по ней трудно попасть на телефоне.

Важно: Размеры можно писать в пикселях (px). 12px — маленький отступ, 24px — заметный. Если не уверены, начните с 12px и посмотрите на превью. Кнопка должна быть не меньше 44 пикселей по высоте — это удобная цель для пальца.

Проверь себя: Какой тег у кнопки? <button>. Что задаёт background? Цвет фона. Зачем нужен padding? Чтобы текст не лип к краям. Что делает cursor: pointer? Показывает, что на элемент можно нажать.

Итог: Кнопка = тег button + настройки: цвет фона, цвет текста, рамка, скругление, отступы, размер шрифта и курсор. Это уже настоящий элемент интерфейса.

Что дальше: В уроке 1.4 — ссылка, картинка и список.

button {
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 14px;
  padding: 14px 28px;
  font-size: 18px;
  cursor: pointer;
}
button:hover {
  background: #16a34a;
}

Уроки модуля 1

• 1.1 Что такое интерфейс и из чего он собран (бесплатно)
• 1.2 Первая страница: заголовок и текст (бесплатно)
• 1.3 Кнопка, на которую хочется нажать — вы здесь (бесплатно)
• 1.4 Ссылка, картинка и список (бесплатно)
• 1.5 Структура страницы: шапка, main и подвал (бесплатно)
• 1.6 Классы и id: как обратиться к элементу (бесплатно)
• 1.7 Мини-проект: страница-визитка (бесплатно)
• 1.8 Разбор первой страницы: что поправить (бесплатно)