Elementor Form Animated Gradient Border | Elementor Tutorial

Find the code used in this tutorial in below

CSS code used:

.elementor-field-textual:focus::-webkit-input-placeholder
{
color: #ffffff;
transform: translateY(-16px);
font-size: 0.65em;
}

.gradient-form i{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #fff;
overflow: hidden;
}

.gradient-form i::before{

content: '';
position: absolute;
left: -50%;
width:100%;
height: 100%;
background: linear-gradient(90deg, #ff1b69,#ff0000,#2196f3,#9c27b0,#ff1b69);
animation: animate 2s linear infinite;
transition: 0.5s;
}

.gradient-form input:valid ~ i::before,
.gradient-form input:focus ~ i::before
{

left: 0;
}

@keyframes animate
{
0%{
background-position-x: 0;
}
100%{
background-position-x: 800px;
}
}

Js Code used:

<script>

let ef = document.querySelectorAll(".gradient-form .elementor-field-group");
let efLength = ef.length;

for(let i=0; i < efLength-1;i++){
	ef[i].appendChild(document.createElement('i'));
}

</script>

Share On

Facebook
Twitter
Pinterest
LinkedIn
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts