10. Кнопки и оформление ссылок
Сегодня мы научимся делать настоящие красивые кнопки, как в играх и приложениях! Они помогут пользователю переходить по страницам и выбирать нужные разделы.
Кнопки делают сайт живым — ведь с ними можно взаимодействовать!
Что такое ссылка
Ссылка — это то, что ведёт тебя на другую страницу. В HTML она создаётся с помощью тега <a> (от слова “anchor” — якорь).Пример:
<a href="https://example.com">Перейти на сайт</a>
Как сделать ссылку похожей на кнопку
Чтобы ссылка выглядела как настоящая кнопка, мы добавим ей класс и оформим с помощью CSS.
<a class="btn" href="gallery.html">Галерея</a>
Теперь добавим стили:
.btn {
display: inline-block; /* превращает ссылку в блок */
background: #4CAF50; /* зелёный фон */
color: white; /* белый текст */
padding: 10px 16px; /* отступы */
border-radius: 8px; /* закруглённые края */
text-decoration: none; /* убирает подчёркивание */
font-weight: bold;
transition: background 0.3s ease;
}.btn:hover {
background: #43a047; /* цвет при наведении */
}
Теперь кнопка выглядит современно! При наведении цвет плавно меняется — будто она оживает.
Попробуй сам
Создай три кнопки:
<a class="btn" href="index.html">Главная</a>
<a class="btn" href="gallery.html">Галерея</a>
<a class="btn" href="contact.html">Контакты</a>
А теперь добавь немного пространства между ними:
.btn {
margin: 5px;
}
Можно сделать кнопки разных цветов:
.btn-red { background: #e53935; }
.btn-blue { background: #1e88e5; }
.btn-yellow { background: #fbc02d; color:#000; }
Меню навигации
Теперь сделаем меню, как на настоящем сайте.
<nav>
<a class="btn" href="index.html">Главная</a>
<a class="btn" href="about.html">Обо мне</a>
<a class="btn" href="gallery.html">Галерея</a>
<a class="btn" href="contact.html">Контакты</a>
</nav>
CSS:
nav {
background: #222;
padding: 10px;
text-align: center;
}nav .btn {
background: #555;
color: #fff;
padding: 10px 15px;
border-radius: 6px;
}
nav .btn:hover {
background: #777;
}
Теперь у тебя есть настоящее верхнее меню! Ты можешь щёлкать по разделам, как на реальном сайте.
Добавим эффект наведения
Чтобы кнопка красиво реагировала на мышку, добавь анимацию:
.btn:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255,255,255,0.4);
}
Теперь кнопки будто прыгают от радости, когда ты на них наводишь курсор
Мини-проект
Создай меню для сайта про твоё хобби:- Главная — расскажи, о чём сайт.
- Галерея — добавь фото или картинки.
- Контакты — напиши, как с тобой связаться.
Сделай кнопки разных цветов: зелёную для «Главной», синюю для «Галереи», оранжевую для «Контактов».
Пример:
<a class="btn btn-green" href="index.html">Главная</a>
<a class="btn btn-blue" href="gallery.html">Галерея</a>
<a class="btn btn-orange" href="contact.html">Контакты</a>
CSS:
.btn-green { background: #4CAF50; }
.btn-blue { background: #2196F3; }
.btn-orange { background: #FF9800; }
Совет от профи
Если хочешь, чтобы кнопка выглядела как в игре — добавь ей градиент или тень:
.btn-game {
background: linear-gradient(45deg, #ff0066, #ffcc00);
color: #fff;
text-shadow: 1px 1px 2px black;
box-shadow: 0 4px 0 #b30059;
}
Главное запомни
- <a> создаёт ссылку, а с CSS она может стать кнопкой.
- Свойство background задаёт цвет фона.
- Свойство border-radius делает края округлыми.
- :hover добавляет эффект при наведении.
- Меню можно создать из нескольких кнопок подряд.
Мини-тест
- Какой тег используется для создания ссылки?
- Что делает свойство border-radius?
- Какой эффект добавляет :hover?