TGViewer
Логово верстальщика Логово верстальщика @webdevlair · 7.9K subscribers
Post #3004 1.97K
👩‍💻 Анимация "пульсации" кнопки

Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени.

Ожидаемое поведение:

• Кнопка остаётся статичной, пока на неё не навели мышь.
• При наведении запускается бесконечная анимация "пульсации".
• При убирании мыши анимация прекращается.

Решение задачи🔽

<button class="pulse-button">Наведи на меня</button>

.pulse-button {
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #28a745;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}

.pulse-button:hover {
animation: pulse 1s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
More from @webdevlair
  1. Oct 16, 2026Deno уходит в Cloudflare. С приветом от Node Спойлер: в Cloudflare команда Deno едет не ко…
  2. Oct 16, 2026Post #4695
  3. Oct 16, 2026Как вставлять иконки в веб, не трогая HTML Ли Веру показывает трюк: иконки настраиваются ч…
  4. Oct 16, 2026⚡️ В сети начали массово сливать IT-курсы и книги известных онлайн школ Вот отсортированна…
  5. Oct 15, 2026Post #4692
  6. Oct 14, 2026Автор ковыряет вёрстку с тех самых времён, когда Chrome был ещё первой версией, а не моноп…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →