Анімація для кнопок

hover-min
ефект

Колекція різних видів CSS3 анімації, які можна застосувати до кнопок, логотипів та інших об'єктів.

Підключення окремого стилю

Якщо ви плануєте користуватися лише одним ефектом, краще скопіювати собі його стилі, щоб користувач не вантажив весь файл hover.css.

Наприклад, ми хочемо ефект Grow:

  • Копіюємо ефект до себе в таблицю стилів.
  • У HTML коді потрібному елементу виставляємо клас .grow.

Наприклад, застосуємо цю анімацію до посилання:

Додаємо потрібний клас:

Підключення всіх стилів

Якщо ви плануєте користуватися всіма стилями, підключіть весь файл hover.css.

  • Завантажте hover-min.css
  • Додайте файл hover-min.css до вашого робочого каталогу з css файлами
  • Підключіть hover-min.css до :

Виберіть ефект та застосуйте його до потрібного об'єкта.

Наприклад, до тієї ж кнопки:

Додаємо потрібний клас:

Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: https://github.com/IanLunn/Hover Переклав: Станіслав Протасевич Урок створений: 12 Січня 2014 Переглядів: 48525 Правила передруку

5 останніх уроків рубрики "CSS"

Смішні ефекти для літер

Невеликий ефект з інтерактивною анімацією букв.

Реалізація кумедних підказок

Невеликий концепт кумедних підказок, які реалізовані на SVG та anime.js. Крім особливого стилю у прикладі реалізовано анімацію та трансформацію графічних об'єктів.

Анімовані літери

Експеримент: анімовані букви SVG на базі бібліотеки anime.js.

Сонцезахисні окуляри від першої особи

Прикольнийексперимент веб сторінки відображення якої здійснюється "від першої особи" через сонцезахисні окуляри.

Навігація, що розкривається

Експериментальний скрипт навігації, що розкривається.