Создадим 5 красивых анимированных кнопок на CSS3. В этом примере код HTML создает 5 кнопок с разными именами классов. Код CSS стилизует и анимирует кнопки с помощью псевдокласса :hover, который запускает анимацию, когда пользователь наводит курсор на кнопку. К каждой кнопке применяется своя анимация с использованием свойства преобразования.
Пример, который мы сделаем:
HTML:
<button class="btn1">Button 1</button>
<button class="btn2">Button 2</button>
<button class="btn3">Button 3</button>
<button class="btn4">Button 4</button>
<button class="btn5">Button 5</button>
CSS:
/* Общие стили для кнопок */
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 20px;
}
/* Кнопка 1 */
.btn1 {
background-color: blue;
color: white;
}
/* Анимация для кнопки 1 при наведении */
.btn1:hover {
transform: translateY(-5px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn2 {
background-color: green;
color: white;
}
.btn2:hover {
transform: scale(1.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.btn3 {
background-color: orange;
color: white;
}
.btn3:hover {
transform: rotate(360deg);
}
.btn4 {
background-color: red;
color: white;
}
.btn4:hover {
transform: skew(15deg);
}
.btn5 {
background-color: purple;
color: white;
}
.btn5:hover {
transform: scale(0.9);
}
Комментарии
0