WEBDEVLAIR Telegram 3969
👩‍💻 Анимация "пульсации" кнопки

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

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

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

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

<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);
}
}
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1



tgoop.com/webdevlair/3969
Create:
Last Update:

👩‍💻 Анимация "пульсации" кнопки

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

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

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

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

<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);
}
}

BY Логово верстальщика


Share with your friend now:
tgoop.com/webdevlair/3969

View MORE
Open in Telegram


Telegram News

Date: |

Public channels are public to the internet, regardless of whether or not they are subscribed. A public channel is displayed in search results and has a short address (link). Informative Choose quality over quantity. Remember that one high-quality post is better than five short publications of questionable value. On June 7, Perekopsky met with Brazilian President Jair Bolsonaro, an avid user of the platform. According to the firm's VP, the main subject of the meeting was "freedom of expression." ZDNET RECOMMENDS
from us


Telegram Логово верстальщика
FROM American