CSS Code To Make Any Element Pulse On Hover

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

What This CSS Code Does:

Adds a pulse effect to any Elementor element when you hover over it.

Usage Examples:

Elementor Button

How To Implement:

Go to the specific element, click on the Advanced tab within the Elementor element, go down to the Custom CSS option and paste the code. That’s it!

The Code:

				
					selector:hover {

  animation: pulse 2s infinite;
}

@-webkit-keyframes pulse:hover {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse:hover {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
				
			

Leave a Reply

Your email address will not be published. Required fields are marked *

READY FOR A TOTALLY AWESOME WEBSITE?