Анимация на кнопках может сделать сайт более интересным и привлекательным для пользователей. В этой статье мы рассмотрим, как создать сайт с использованием анимации на кнопках.
CSS-анимации на кнопках
Для начала, нам нужно создать кнопку с базовым стилем. Используем следующий HTML и CSS код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимированные кнопки</title>
<style>
.button {
padding: 15px 30px;
font-size: 18px;
color: white;
background-color: #007BFF;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<button class="button">Нажми меня</button>
</body>
</html>
В этом примере у нас есть базовая кнопка с синим фоном и белым текстом. При наведении курсора на кнопку, фон меняет свой цвет.
Теперь добавим анимацию при наведении курсора на кнопку. Для этого мы будем использовать CSS-свойство transform:
.button:hover {
background-color: #0056b3;
transform: scale(1.1);
}
Теперь при наведении курсора на кнопку, она увеличивается на 10% 😃
Добавление анимации с помощью JavaScript
Если вы хотите сделать более сложную анимацию или добавить интерактивности, вы можете использовать JavaScript. Например, давайте добавим анимацию при нажатии на кнопку:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимированные кнопки</title>
<style>
.button {
padding: 15px 30px;
font-size: 18px;
color: white;
background-color: #007BFF;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #0056b3;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="button" id="myButton">Нажми меня</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('mousedown', () => {
button.style.transform = 'scale(0.9)';
});
button.addEventListener('mouseup', () => {
button.style.transform = 'scale(1)';
});
</script>
</body>
</html>
Теперь, когда мы нажимаем на кнопку, она уменьшается на 10% 👍
Заключение
В этой статье мы рассмотрели, как создать сайт с использованием анимации на кнопках. Мы использовали CSS-анимации и JavaScript для добавления интерактивности. Эти примеры являются простыми, но вы можете внести свои изменения и сделать анимацию еще более интересной. Удачи в веб-разработке!
Добавить комментарий