Кнопка на сайті — це не лише елемент для взаємодії, але й важлива складова дизайну, яка впливає на сприйняття користувачем вашого бренду. У цій статті ми покажемо, як створити сучасну кнопку з анімацією та скругленими краями за допомогою HTML і CSS.
1. Базова HTML-структура кнопки
Створимо просту кнопку в HTML у файлі index.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анімована кнопка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="animated-button">Натисни мене</button>
</body>
</html>
2. CSS-стилі для кнопки (файл styles.css)
Створимо стильний вигляд кнопки з анімацією у файлі styles.css
/* Основний стиль кнопки */
.animated-button {
background-color: #E50914; /* Червоний фон */
color: #FFFFFF; /* Білий текст */
border: none; /* Без рамки */
border-radius: 50px; /* Скруглені краї */
padding: 10px 20px; /* Внутрішні відступи */
font-size: 16px; /* Розмір тексту */
font-family: 'Arial', sans-serif; /* Шрифт */
cursor: pointer; /* Зміна курсору на "руку" */
transition: all 0.3s ease; /* Плавний перехід для анімації */
}
/* Анімація при наведенні */
.animated-button:hover {
background-color: #FFFFFF; /* Зміна фону */
color: #E50914; /* Зміна кольору тексту */
transform: scale(1.1); /* Збільшення кнопки */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Тінь */
}
3. Додавання ефекту натискання у файлі styles.css
Додамо ефект натискання, щоб кнопка виглядала реалістично.
/* Ефект натискання */
.animated-button:active {
transform: scale(0.95); /* Зменшення кнопки */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Зменшення тіні */
}
4. Результат
При наведенні курсору кнопка змінює колір, розмір і додає тінь, а при натисканні трохи зменшується, створюючи ефект натискання.
(Кнока з анімацією та скругленими краями для сайту)
(Кнока з анімацією та скругленими краями для сайту при наведенні курсору)
Висновок
Кнопка з анімацією та скругленими краями додає сайту сучасності та інтерактивності. Вона не лише приваблює користувачів, але й покращує загальне враження від дизайну.