CSS Button Hover Animation Effects using Only HTML & CSS

[@raghavparashar5456]

After trying for 3 hours to make a good hover effect I randomly open this video and my problem solved in 10 mins. Thank you soo much.

[@KV21YT]

I was watching other videos like this but the buttons didn't worked, but in this video the buttons worked! So thank you so much!! You deserve a like and a subscribe.

[@juliettegrayse1113]

FANTASTIC! I followed along and was low-key proud of myself! Great video!

[@thebluechimera]

Great little tutorial! A suggestion: maybe next time towards the end, after you've gotten it working, you could also consolidate as many of the lines as possible

[@briandesign]

Thanks! I'll be sure to do that next time

[@adampaul7905]

What does that mean pls ?

[@Yanoi_alternativo]

@@adampaul7905 It means to simplify the code as much as possible.

[@Yulia-kw6wb]

This is the easiest way for sure. Thanks a lot!

[@indianajuan]

Thanks a lot for your help ! I don"t usually comment on KZbin but today I had to. You helped me a lot, for real. I'm new at coding and I spent the last three hours trying to figure out how to do this. Not only you explain it in a simple way, your diction is perfect. For a non native english speaker, it's just wonderful. You've just gained a new suscriber

[@briandesign]

Glad I could help!

[@teo8699]

What a great tutorial! I learned new things from there.Thank you !

[@briandesign]

Glad it was helpful!

[@Maxim99t]

GOATED tutorial thankss

[@RV-kl2wl]

I was looking for similar effects and found this video. Absolute Gold. Keep up the good work.

[@wochiewohcloverhongie2913]

these tutorial is cool and simple will love to see more of these

[@Nelson.4E]

Thank you a lot. It works!

[@codingtechnology6779]

Awesome video! Inspired me to play with the code!

[@JoelGetzke]

Thanks man this helped!

[@ananyasingha6437]

OMG!The best tutorial ever made. edit:easy too

[@pauljohn3898]

Super amazing button design

[@freelancingpro5788]

best trick ever man.......

[@Snowfro]

Hey I’m pretty new to website creating, but I’ve gotta say this is a great tutorial thx

[@mohammadnuruddin4596]

Great job

[@nmr994]

ThanQ bro its working ❤❤

[@dhruvrao517]

Thanks man awesome tutorial

[@learningtostream3919]

fantstic thank you

[@englisitupwithvale4381]

than kss dude! I follow you

[@UnethicalMonkey420]

thank you i will now skid off of this code

[@audio9114]

this was amazing! I know so much more about html and css now! thanks you so much!

[@danielleantinero5210]

Thank you so much!

[@MaxxedAura]

on my first editor it didn't work after it I installed visual studio code it seems after this that my editor is broken I now also saw some reviews. THANKS BRIAN THIS IS SO COOL!! (cuz it works now).

[@szymonpiotrbuczynski7653]

Great tutorial man :D

[@namelesslamp12]

Just started front-end very nice tutorial simple and cool

[@anuragthakur5787]

great video man thank you very much

[@sauvikmondal4828]

great tutorial..thank you..

[@briandesign]

Thanks Sauvik!

[@rubelbarua9953]

great job bro....and so easy to understand

[@romaph]

I don't know the reason why my second btn-2 don't change when I put the cursor on it. Help me!

[@innocentnzuza3749]

Awesome Bru Works 100%

[@deiv1781]

Nice video man!

[@mfs1390034]

Great video. Could you make the animation that slides at an angle instead of verticle? Basically a diagnal side sliding to the right.

[@balindamorris2273]

Thank you i learned a lot!

[@Music-jx1bh]

thank you very much

[@CodeRexLK]

Wow! Cool method 👏

[@universaltv5223]

Great. That's what I was searching it is very helpful

[@FlemerX]

Thank you

[@randombucket5596]

this is great, thanks a lot

[@raheelmalikox]

I love you work

[@noorkhaliq]

Much appreciated

[@productspromoters]

Thank you dear

[@elahirabbi3636]

Super simple super easy.

[@diamondking7412]

thanks a lot its very helpfull

[@cogaiit4811]

Tks u very much

[@gurbanovsh]

Wowww 🧨🧨

[@cristianjohanoterooviedo4881]

thanks Bro. Just what I looking for Bless

[@GibranCastillo]

Nice!

[@humamfakhri9691]

Thank youu!

[@llputsoa]

Hi there, I tried doing exactly what you just showed us but I don’t seem to see the hover over my link

[@swaritkumar9103]

Hi It was a great tutorial, but my button animation is flickering, how to fix it?

[@veenasharma4368]

Same with me

[@lukajokhadze2791]

@@veenasharma4368 same here

[@giovannimichel5506]

Thank you for the intel.

[@briannguyen5057]

wow thanks

[@ellsonmendesYT]

I think using before or after is better cuz we dont have to account for button width, not hard coded, but gr8t anyways.

[@Amirrezarafieii]

great

[@tsdineshjai8565]

Great Video, but how to get the click effect( button goes little deep) keeping this settings

[@arT-lc9dh]

Greate.

[@damianverlaque4323]

how did you copy and paste the line below like that

[@veenasharma4368]

How to fix the flickering problem

[@Zaesougly]

Is there a way to add an animation with “onclick”?

[@harshmattu2278]

Yes

[@harshmattu2278]

Use active in the place of hover

[@wnoy9578]

.button:active{ } I think

[@thecringequeen31]

.active is for onclick

[@denisrabotay]

yea man !

[@alaminhossain9062]

বাংলাদেশি কেউ আছো 💝💝 থাকলে লাইক দাও 👍

[@raheelmalikox]

Bro thank u

[@tare_]

what extension does that folder/nested code highlighting? I've tried blockman but it looks different.

[@mcjacksonoff]

4:24 min. hello!! Why do i need text-align in this example??

[@prasoonsingh4315]

How I use tag in these buttons ? Please answer

[@instagram6260]

HOVER ME

[@sobiamalik3682]

@@instagram6260 how can I add style to 'HOVER ME' ? Thx

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@briandesign]

Thanks!

[@ELEV808]

Também achei.

[@howtostudy123]

can you do a tutorial on top of this code and make it clickable and it will change background?

[@ibsarp]

idk why but it did not work one i hover the color dont change but other effcts do work can u help me with this

[@ibsarp]

i found the issue i forgot to put px

[@computerpillar8285]

@@ibsarp for me hover is not working bro

[@shlokshar]

How would i run this transition when I call a javascript function

[@alexanderfull1]

Why is z-index: -1 being displayed on top of z-index: 1? The code is working like a charm, but I'd like to gain a deeper understanding for why it works

[@howtostudy123]

can i asked what theme do you use

[@jekaagung2741]

how to set the speed of transition?

[@briandesign]

should just be the value you put for duration

[@axpect.]

Can I add a hyperlink to it?

[@ThatSamm]

how can i add function to that button?

[@iydl]

How do I make the spacing of the 2 buttons not so far appart?

[@sushantmore6492]

Margin property

[@anwesaray7943]

hey in the end you wrote btn2:hover:before again and it worked, i didn't understand that part, can you please explain, new to this so sorry, hehehehe

[@I卄卂尺几乇乇]

animating box shadow is bad for performance, i would suggest using the pseudo classes method

[@lolpissed7015]

.btn-2{ width: 300px; height: 100px; border: none; color: white; border-radius: 4px; transition: ease-out 0.3s; font-size: 2rem; outline:none; border:3px solid #42FBF2; position:relative; z-index: 1; } .btn-2:hover{ color:#fff; cursor:pointer; } .btn-2:before { transition: 0.5s all ease; position: absolute; top:0; left:50%; right:50%; bottom:0; opacity: 0; content: ""; background-color: #42FBF2 ; } .btn-2:hover:before { transition: 0.5s all ease; left:0; right:0 opacity: 1; z-index: -1; } What did i do wrong here its not working for me

[@sabeermajid3533]

All ease-in-out. Correct it

[@uwushhsw5334]

What is this software using web design 🥺

[@YvngCagoBeats]

Okay, thank you but i cant seem to figure out: How do i add a function such as when i press the button, itll take me to another webpage. sorry if its a bad question, im very new to this haha

[@sabeermajid3533]

U can use link property

[@TFaminu]

❤️

[@loydcose2780]

what if the button itself has link? that's my problem :(

[@samis.a.7354]

So a very very dumb question, how do i combine it, so it works on my website=?

[@i.tconceptsofsam.j8076]

so cool.. I also make a tutorial on hover button with neon effects and animated design. It's supper cool.

[@georgepreece1226]

Is there a way to keep this design and make a drop down menu from the button? I'm new to this...

[@dreiigHiveSGClips]

how did you do copy and paste that at 2:06

[@TahMeeDzz]

Ctrl+D

[@Lexiphy]

:hover isn't really working (it won't turn blue)

[@sshakedi125wonder]

can add link to the code please?

[@ambientsoda106]

what about running several effect as I found a animation for text impeded music being played..

[@bosscoding3999]

how could we make the starting place changed like form the top

[@briandesign]

you could try replacing left with top

[@exbeasts8737]

WHY CANT EVERYONE TALK WHILE TEACHING LIKE EVERY VIDEO I CLICK ON HAS MUSIC IN IT =_0

[@briandesign]

lol they making music videos

[@exbeasts8737]

@@briandesign True LOL

[@satyabratapanda]

AWESOME button is not working

[@MaxxedAura]

it doesn't work for me

[@thornchea3712]

sowftware name code

[@briandesign]

vs code

[@howtostudy123]

code?

[@mdnerobkhan7045]

Please give me sorce Code.....

[@ehashsecentric6003]

7:15