Создайте кнопку, которая всегда располагается в правом нижнем углу экрана, поверх основного содержимого страницы. При наведении на кнопку её цвет должен изменяться.
Ожидаемое поведение:
• Кнопка всегда остаётся в правом нижнем углу экрана.• При наведении на кнопку её цвет меняется на более тёмный оттенок.• Кнопка не перекрывает содержимое страницы и выглядит гармонично.Решение задачи🔽
<div class="content">
<p>Основное содержимое страницы...</p>
</div>
<button class="floating-button">Нажми меня</button>
/* Стили основного содержимого */
.content {
padding: 20px;
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Фиксированная кнопка */
.floating-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 15px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 50px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
/* Эффект наведения */
.floating-button:hover {
background-color: #0056b3;
transform: scale(1.1);
}