Создайте кнопку, которая меняет цвет фона и добавляет лёгкую тень при наведении. При обычном состоянии кнопка должна иметь закруглённые углы и немного увеличиваться при наведении для визуального акцента.
Ожидаемое поведение:
• Основной цвет фона кнопки — синий
(#007BFF).• При наведении цвет фона становится темно-синим
(#0056b3), добавляется тень, и кнопка слегка увеличивается.Решение задачи🔽
<button class="styled-button">Нажми меня</button>
.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}