UI Effects Lab

CSS-анимации, кнопки и визуальные эффекты с live-превью. Настройте timing, скопируйте готовый код для проекта.

Всё работает в браузере. Готовый код — скопировали и вставили.
Готовые пресеты

Контент

Эффект

Настройки

Готовый код

/* Выберите эффект */
Как использовать

Скопируйте CSS в свой файл стилей, добавьте класс к элементу в HTML. Для появления при скролле — используйте сниппет с IntersectionObserver во вкладке HTML.

Готовые пресеты

Стиль

Цвета кнопки

Анимация кнопки

Текст кнопки

Форма

Эффект при наведении

Готовый код

Совет

Скопируйте HTML во вставку, CSS — в свой файл стилей. Класс .ub-btn можно переименовать.

Готовые пресеты

Текст поверх

Паттерн

Цвета

Размер

Готовый код

Совет

Скопируйте CSS в стили, примените класс .pattern-bg к элементу. Паттерны весят 0 байт — это чистый CSS, без картинок.

Готовые пресеты

Текст

Иконка

Анимация

Настройки

Готовый код

Совет

Скопируйте SVG в HTML, CSS — в стили. Анимация чисто на CSS — JS не нужен. Работает с prefers-reduced-motion.

О инструменте

CSS-анимации работают нативно в браузере — никакого JS в продакшене не нужно. Используйте prefers-reduced-motion чтобы уважать настройки доступности пользователя. Для появления при скролле — добавьте IntersectionObserver из вкладки HTML.