Creative Button Animation Effects | CSS Snake Border Animation

[@gokhila.b2312]

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%); } }

[@Psydestr]

may god bless your soul

[@atiq11sadeqi]

Thank u

[@CARGO_GAMING]

@@atiq11sadeqi kabhi kabhi lagta hai tum hi bhagwan hai

[@nigelbande7661]

How can I copy this code with the KZbin app?

[@truongbuipv]

Thanks god

[@shivlingjadhav9936]

You are really "GOD of CSS" ❤🙏🤩

[@benjaminhaynes2012]

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

[@bondstar927]

This way produces some inconsistencies, ie. the reversed animations are not somehow in the flow

[@a_raouf96]

You are a magician. You can make everything possible which we can't even imagine.

[@Rahul_Seth]

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

[@shubhampanchal1037]

You deserves million likes

[@lovelypicturepro]

MR. CSS GOD

[@ColeEvyx]

Your tutorials are so SO SO freaking good.

[@tanzzzzz225]

Only thing stopping this channel is, you dont explain anything

[@MehdiL]

It's better that way since it's not like he/she is building something huge. Plus all the stuff he used can be googled for an indepth explanation

[@amaiyasana6080]

Your all videos are just amazing. 😍

[@nanotech7431]

Great sir 👍

[@WhiteCoder]

Nice bro your work is always amazing

[@sanjay94827]

i am the first😀

[@hameedaljlyly1144]

Very good job 👏🏻

[@karamveersachdeva935]

Awesome man

[@bezawadaharikrishna3444]

This izzz Astonishinggg

[@abdullahjavaid2137]

Awesome work bro very nice

[@jaspreethayer2275]

Thrilling

[@user-tf7te5fs2n]

Amazing 🖒 Waiting for another incredible video and design

[@123khiem5]

great css , thks bro

[@marko6525]

Why u so good in css?

[@Sb_shorts243]

Your video is very useful thanks 😍

[@asia22]

Thank you so much. You have really good tutorials and actually zoom in close enough for a clear view.

[@carterjm]

Nice! Very nice!

[@AbdurRahman-ww9li]

Such a guy, who is push me up with anmation.

[@hankster4071]

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

[@amishamahyavanshi2382]

Fabulous techniques you in css.. 🙂🙂

[@franciscangco2664]

This is Art. Thank God I found and subscribed to your channel. Also I've downloaded your app and loving it since.

[@polishtom]

Very nice!

[@iqraangel4824]

Amazing Dear

[@azharraihan5222]

Genius Boss.....

[@jonneeelll6488]

Great Video Bro

[@sowmyasg8127]

woww very nice

[@DSodienye]

Awesome 👍

[@juancamilonarvaezsandoval7969]

excelent

[@hafizurrahmanfahim8820]

Wow incredible

[@rohanroy605]

This is so frickin cool

[@Желейныймишка-щ8в]

It is soooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo amazing

[@manisham9866]

Awesome...... forever

[@josephmakram4342]

Awesome 😍😍

[@emersoncarvalho8496]

Thanks....🙏🏻👍🏻

[@pv8358]

Super video

[@trevinperera1161]

very creative

[@bhavikchandigara1635]

Good job dear

[@oniksen8841]

Это делается просто, но при этом красиво...Круто!

[@ManishKumar-us6eo]

Your all video is amazing

[@AsRammstein]

Дякую, дійсно красива анімація !

[@PatoTatengue]

Me gusto mucho la animación para botones!!!

[@Sigmaop2278]

#Sir #You #Are #Best

[@wahyuaryapambudi8054]

Wow 😦

[@nguyenex]

Great tut sir ❤❤❤

[@avisheknandi9166]

Wow it's wonderful... 😍

[@tolgaaymaz6286]

thank you very good video

[@codingblocks3495]

Creative amazing subbed

[@tinngoquang6500]

Awesome, it's really creative

[@alesiaperetiahina6769]

Oh , it's amazing! Thank you so much. I just study html and css, your videos will be very useful for me

[@Theleonardomoraes]

hi, i'm in the third year of information systems graduation, and i would like to exchange experience with other developers, if you want to chat, come back here

[@PDCMYTC]

@@Theleonardomoraes I am a game developer and a web developer

[@maparazmaplaz3630]

Beast mode!

[@AwaMelvine]

Wow this is just badass 😎. Keep up the good work

[@fleshweapon6853]

wow 😍

[@moonseong_]

Nice

[@muhammadhasansiddiqui6017]

Wow, awesome and easy ❤️

[@mehmetcansayak3941]

SO COOOOOLL GUY

[@lucianosantillan164]

Awesome!!

[@atiq11sadeqi]

awesome

[@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 .. 💖

[@LearnQuicklyByPractice]

Great

[@vamsichilukuri]

Lovely

[@aleksd286]

Wow, that is actually pretty awesome

[@cedrio1027]

very pretty

[@max_game_ua]

Awesome dude👍

[@LassNoches]

awesomeee !

[@pratyushagrawal2219]

Its cool yr its amazing beat idea

[@sharminakhter7181]

best one ...really liked it

[@朽木自雕-j6r]

太厉害👍

[@seydinabadiane8761]

just amazing

[@100xblynn]

so cool

[@rkentergraphic2121]

This is great

[@o-autentico]

wow goooooddd, i love that, congrats bro

[@highinspiration9988]

Amazing

[@mohammadanarul624]

NICE...

[@aguschaud5224]

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

[@simplestyoutuber508]

Yes just add some functions in your js and link it to your html file .

[@petarnenadic9036]

This is amazing. Keep up!!!!!

[@mourad1413]

Just amazing Keep going

[@SouAndersonDavid]

This is so cool

[@rashedobeidat5150]

excellent, thank you

[@Marco-br2cx]

I can find this animation in your course?

[@digitalservices118]

such an amazing

[@pirat.3946]

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?

[@bnsmultimedia5070]

wow...Nice

[@shareskill91]

Awesome but mujhe animation delay kis trh s use kiya hai woh concept samaj ni aya

[@TheWillis0]

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

[@subhamdhar683]

Awesome

[@lutfianam1889]

Bagus👍

[@itsamarpritam]

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

[@inahr9734]

Amazing!

[@jhonaroldechavez5867]

What app did you use?

[@molopolor7796]

cool cool very nice work thank you for share it with us :)

[@kert2259]

It's awesome! Thanks ^)

[@joyganguly106]

thank you

[@avulaupendar9593]

hello can you say what sublime text are you using