2 Types of Elementor Animated Borders on HOVER | Elementor Flexbox Container | Tips And Tricks

[@thecreativarena]

/* First Card Animation */
:root{
--color-one: #ff0000;
--color-two: #00FF00;
--size: 350px;
--speed: 4s;
}
selector{
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
selector:hover:before{
content: '';
position: absolute;
width: var(--size);
height: 200%;
background: linear-gradient(var(--color-one), var(--color-two));
animation: animate var(--speed) linear infinite;
}
@keyframes animate{
50%{
filter: hue-rotate(350deg);
}
}
/* Second Animated Card */
:root{
--color-one: #FB653A;
--color-two: #F5FF89;
--size: 50%;
--speed: 4s;
}
selector{
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
selector:hover:before{
content: '';
position: absolute;
left: 0px;
right: 0px;
top: 0;
bottom: 0;
margin: auto;
width: var(--size);
height: 160%;
background: linear-gradient(var(--color-one), var(--color-two));
transform: rotate(35deg);
animation: animate var(--speed) linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

[@iamleek]

Thank you very much.

[@GbengaSaviour]

Nice one

[@GulfMarketingSolutions]

where to get the app where you can edit code like u did and how to find the specific code for container

[@thecreativarena]

you can use Atom Code Editor, VS Code Editor as well there are free app you can download

[@GulfMarketingSolutions]

@@thecreativarena I want to know which u used

[@GulfMarketingSolutions]

@@thecreativarena and how did u get the code on code editor

[@thecreativarena]

i use to make use of Atom code editor but now am using VS Code

[@thecreativarena]

you write the code on the editor

[@blueRating7]

Is it possible to do the animated border without the coding

[@thecreativarena]

I have not tried it out before but for now, I don't think you can actually do it without code