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

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

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

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

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

<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);
}
}
  • 👎 1
More from @webdevlair
  1. Oct 6, 2026Post #4674
  2. Oct 5, 2026Claude теперь работает под надзором — и это, как ни странно, к лучшему Anthropic выпустили…
  3. Oct 5, 2026Post #4672
  4. Oct 5, 2026Cache Control в Claude Code — мод для тех, кто устал смотреть, как токены утекают в никуда…
  5. Oct 5, 2026OpenAI устроила месяц подарков — 28 дней апдейтов и халявных ресетов лимитов Тибо из OpenA…
  6. Oct 4, 2026Как писать стили в 2026: CSS Modules, CSS-in-JS, Tailwind и zero-runtime Всем привет! Меня…
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 →