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