I have successfully created a button with an animation on my webpage. The button pops up after 3-4 seconds, and when the user hovers over it, it widens. However, I'm encountering an issue where the pop-up animation restarts every time the button is hovered over. The CSS code responsible for this animation can be found at header .down_text .button-play around line 140.
header {
/* CSS styling for header */
}
/* More CSS styles here... */
@keyframes heading {
/* Keyframes for heading animation */
}
header .down_text .button-play {
/* Styles for the button play animation */
animation: popUp normal forwards ease-in-out;
}
header .down_text .button-play:hover {
/* Styles for hover animation on the button */
}
/* Media queries for different screen sizes */