Creative Button Animation Effects | CSS Snake Border Animation

Enroll My Course : Next Level CSS Animation and Hover Effects

Another Course : Build Complete Real World Responsive Websites from Scratch
------------------
Join Our Channel Membership And Get Source Code Everyday
------------------
Please LIKE our Facebook page for daily updates...
------------------
Track: Sinner's Heist - Streetlight People (feat. Harley Bird) [NCS Release]
Music provided by NoCopyrightSounds.

[gokhila.b]

Awesome button bro.
And for those who are too lazy..


body
{
margin: 0;
padding: 0;
background:#0c002b;
font-family: sans-serif;
}
a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:#1670f0;
padding:30px;
letter-spacing:2px;
text-transform:uppercase;
text-decoration:none;
box-shadow:0 20px 50px rgba(0, 0, 0, .5);
overflow:hidden;
}
a:before
{
content: '';
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
width: 50%;
background: rgba(255, 255, 255, 0.05);
}
a span:nth-child(1)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #0c002b, #1779ff);
animation: animate1 2s linear infinite;
}
@keyframes animate1
{
0%
{
transform:translateX(-100%);

}
100%
{
transform:translateX(100%);

}
}
a span:nth-child(2)
{
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(to bottom, #0c002b, #1779ff);
animation: animate2 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate2
{
0%
{
transform:translateY(-100%);

}
100%
{
transform:translateY(100%);

}
}
a span:nth-child(3)
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to left, #0c002b, #1779ff);
animation: animate3 2s linear infinite;
}
@keyframes animate3
{
0%
{
transform:translateX(100%);

}
100%
{
transform:translateX(-100%);

}
}
a span:nth-child(4)
{
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(to top, #0c002b, #1779ff);
animation: animate4 2s linear infinite;
animation-delay: 1s;
}
@keyframes animate4
{
0%
{
transform:translateY(100%);

}
100%
{
transform:translateY(-100%);

}
}

[hankster]

Just caught this in my feed. May I say, that's cool AF! Yes, I will implement this on my new site! Cheers!

[dannymiller]

How is it that you learned to perform such an amazing structure?

[Marco-brcx]

I can find this animation in your course?

[KostasStorasK]

You can animate borders not span elements

[banderadoerniejhon]

what kind of application do you used to make it?

[tanzzzzz]

Only thing stopping this channel is, you dont explain anything

[benjaminhaynes]

Instead of making 4 animation keyframes. You can use the first two. On the last 2 spans you can the css propery animation-direction : reverse; to reverse the animation

[itsamarpritam]

What is the name of the background music. Please tell me.

[Rahul_Seth]

Very fantastic coding through html and css.. Best 👍👌👌👌👍

[notoriousgabru]

I appriciation bro But you took most of the content from codepen.io There is nothing wrong to share url with description.

[Zewalk]

Warning: Nothing To Output
Bframe Decoder Lag🙄

[pirat.]

hey might be a dumb question, but if i post that code into the bottem of my code for my site the whole site turns purple and random stuff gets rearrenged, who can i make it that the button appears on the bottem site and it works?

[GauravTubeOfficial]

Bro make a tutorial for beginners and explain plz ..u are awesome u are my inspiration coz of u I put my interest in css html ..so plz .. 💖

[aguschaud]

Awesome video...
But I have a question, is it possible to use “onclick “ function on an A element ínstead of a button? Cause I need to execute some functions when the button is pressed

[tftefsn]

Amazing 🖒
Waiting for another incredible video and design

[dhanviakash]

Hii iam akash One of your follower I had a doubt about span tag and its usage

<a

In the above code what is the usage of span tag ??

[TheWillis]

How would one duplicate this and have two or three of these buttons?

[sashanaiz]

The first one works, the other three don't even show up.

[km]

Hi I would like to create a website with not only a button that is so animated but 6 times how do I do it now?