🎨

Модуль 2. CSS и оформление

Занятие 19
Ссылки и кнопки

Сегодня мы сделаем «живые» кнопки и меню, которые реагируют на наведение мыши и нажатие.

👀

Сегодня сделаем вот такое

👆

Элементы, которые отвечают

Наведи мышь на кнопку справа 👉

  • Цвет меняется — «на меня можно нажать»
  • Нажатие — кнопка «вдавливается»

Это делает CSS, без программирования!

<button class="btn">Нажми меня</button>
.btn {
  padding: 16px 32px; font-size: 22px;
  color: white; background: #00b894;
  border: none; border-radius: 12px;
  box-shadow: 0 6px 0 #00795f;
  cursor: pointer; transition: 0.15s;
}
.btn:hover { background: #00cec9; }
.btn:active { transform: translateY(6px); box-shadow: none; }
🎭

Псевдокласс = состояние

a:hover { … } — «ссылка, когда на неё навели»

  • :hover — навели мышь
  • :active — нажимают
  • :focus — в фокусе (Tab, курсор в поле)
  • :visited — уже посещали

⚠️ Без пробела перед двоеточием!

🧭

Стильное меню

  • text-decoration: none — без подчёркивания
  • padding — ссылка как кнопка
  • :hover — подсветка
<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Галерея</a>
  <a href="#">Контакты</a>
</nav>
.menu { display: flex; gap: 8px; font-family: sans-serif; }
.menu a {
  padding: 10px 18px;
  border-radius: 8px;
  color: #2d3436;
  text-decoration: none;
  transition: 0.3s;
}
.menu a:hover { background: #fdcb6e; }
🧈

transition — плавность

  • transition: 0.3s — плавно за 0,3 секунды
  • Пишем в обычный стиль, не в :hover
  • 0,15–0,4 с — идеально

Сравни два квадрата справа 👉

<div class="box fast">резко</div>
<div class="box smooth">плавно</div>
.box {
  display: inline-block; width: 120px; padding: 30px 0;
  text-align: center; color: white; background: #6c5ce7;
  font-family: sans-serif; margin: 8px;
}
.smooth { transition: 0.4s; }
.box:hover { background: #e84393; transform: scale(1.15) rotate(3deg); }
🪄

Эффекты transform

  • scale(1.05) — увеличить
  • translateY(-4px) — приподнять
  • rotate(3deg) — повернуть

transform не толкает соседей.

<div class="cards">
  <div class="card">🐱</div>
  <div class="card">🐶</div>
  <div class="card">🚀</div>
</div>
.cards { display: flex; gap: 16px; padding: 20px; }
.card {
  font-size: 50px; padding: 20px; background: white;
  border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: 0.25s;
}
.card:hover { transform: translateY(-10px) scale(1.08); }
⌨️

:focus — не забудь о клавиатуре

  • Многие управляют сайтом клавишей Tab
  • Рамка фокуса показывает, где ты
  • ❌ outline: none без замены
  • ✅ Красивый :focus-visible

Кликни в поле справа.

<input placeholder="Поиск...">
<button>Найти</button>
input, button { font-size: 20px; padding: 10px; border: 2px solid #b2bec3; border-radius: 8px; }
input:focus { border-color: #6c5ce7; outline: 3px solid #a29bfe; }
button:focus-visible { outline: 3px solid #fdcb6e; }
🦓

Бонус: полосатая таблица

  • :nth-child(even) — чётные
  • :nth-child(odd) — нечётные
  • :first-child, :last-child
<table>
  <tr><td>Аня</td><td>12</td></tr>
  <tr><td>Петя</td><td>9</td></tr>
  <tr><td>Оля</td><td>15</td></tr>
  <tr><td>Дима</td><td>11</td></tr>
</table>
table { border-collapse: collapse; font-family: sans-serif; font-size: 20px; }
td { padding: 8px 20px; }
tr:nth-child(even) { background: #dfe6e9; }
tr:hover { background: #ffeaa7; }
🃏

Запомни!

  • :hoverПри наведении
  • :activeПри нажатии
  • :focusЭлемент в фокусе
  • transition: 0.3sПлавность
  • text-decoration: noneБез подчёркивания
  • cursor: pointerКурсор-рука
  • transform: scale(1.05)Увеличить
⌨️

Практика: Стильное меню и кнопки

  1. Убери подчёркивание у ссылок меню и оформи их как кнопки.
  2. Сделай, чтобы при наведении менялся фон пункта меню.
  3. Сделай большую кнопку, которая «вдавливается» при нажатии.
  4. Добавь полю ввода яркую рамку при фокусе.
  5. Сделай все переходы плавными с transition.

🚀 Со звёздочкой: Раскрась пункты меню через :nth-child и сделай подчёркивание, которое «вырастает» при наведении.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Придумай, как будут выглядеть кнопки на твоём сайте: цвет, форма, эффект.