How to create glowing effect on button hover | Elementor tutorial

In this quick tutorial I will show you how to add animated glowing effect on button hover using Elementor.

CSS I used

CSS for button hover
:root{
    --grad1: #03a9f4;
    --grad2: #f441a5;
    --grad3: #ffeb3b;
    --grad4: #03a9f4;
}

selector a{
	background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));
	background-size: 400%;
	z-index: 1;
	position: relative;
}
selector a:hover{
	animation: animate 8s linear infinite;
}
@keyframes animate {
	0%{
		background-position: 0%;
	}
	100%{
		background-position: 400%;
	}
}

CSS for glowing background on hover


/*css for glowing background*/
selector a:before{
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: 0;
	background: linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3), var(--grad4));
	background-size: 400%;
	border-radius: 40px;
	opacity: 0;
	transition: 0.5s;

}
selector a:hover:before{
	filter: blur(20px);
	opacity: .6;
	animation: animate 8s linear infinite;
}

0 Comments

Submit a Comment

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

Start Working with me for any wordpress project!