CSS Button Hover Animation Effects using Only HTML & CSS

Learn how to create simple CSS button hover animation effects using only HTML and CSS. We will animate two buttons in this beginner tutorial. The first button will have a slide-out hover animation and the second button with have a fade-out from both sides effect.
If you have any other creative CSS button examples with effects & animations, feel free to comment them below.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Check out my playlist to see my HTML, CSS, & Javascript Tutorials
• How to Make a Website ...
How to create a Navbar with HTML and CSS
• How to Make a Responsi...
Udacity Front end Developer Nanodegree Review
• Udacity Front End Web ...

[@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!

[@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!

[@RV-kl2wl]

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

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

[@Maxim99t]

GOATED tutorial thankss

[@Snowfro]

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

[@Yulia-kw6wb]

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

[@wochiewohcloverhongie2913]

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

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

[@romaph]

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

[@audio9114]

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

[@llputsoa]

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

[@learningtostream3919]

fantstic thank you

[@pauljohn3898]

Super amazing button design

[@universaltv5223]

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

[@sauvikmondal4828]

great tutorial..thank you..

[@briandesign]

Thanks Sauvik!

[@hamzamughal9875]

thank you very much

[@UnethicalMonkey420]

thank you i will now skid off of this code

[@JoelGetzke]

Thanks man this helped!

[@CodeRexLK]

Wow! Cool method 👏

[@szymonpiotrbuczynski7653]

Great tutorial man :D

[@damianverlaque4323]

how did you copy and paste the line below like that

[@rubelbarua9953]

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

[@freelancingpro5788]

best trick ever man.......

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

[@innocentnzuza3749]

Awesome Bru Works 100%

[@tsdineshjai8565]

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

[@balindamorris2273]

Thank you i learned a lot!

[@productspromoters]

Thank you dear

[@randombucket5596]

this is great, thanks a lot

[@nmr994]

ThanQ bro its working ❤❤

[@diamondking7412]

thanks a lot its very helpfull

[@veenasharma4368]

How to fix the flickering problem

[@tare_]

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

[@samis.a.7354]

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

[@humamfakhri9691]

Thank youu!

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

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

[@howtostudy123]

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

[@arT-lc9dh]

Greate.

[@briannguyen5057]

wow thanks

[@georgepreece1226]

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

[@denisrabotay]

yea man !

[@loydcose2780]

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

[@iydl]

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

[@sushantmore6492]

Margin property

[@dreiigHiveSGClips]

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

[@TahMeeDzz]

Ctrl+D

[@romuloalves9349]

Ótimo vídeo parabéns ✌.

[@briandesign]

Thanks!

[@GokuMediaa]

Também achei.

[@ambientsoda106]

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

[@howtostudy123]

code?

[@ehashsecentric6003]

7:15

[@satyabratapanda]

AWESOME button is not working

[@thornchea3712]

sowftware name code

[@briandesign]

vs code

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

[@ts8960]

add a codepen rn

[@ReyBanYAHUAH]

Always remember to repent of your sins (sin is transgression of YAHUAH The Father In Heaven’s LAW: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy) And Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that you can be forgiven of your sins! HE Loves you! Come to HIM🙂🙂

[@PinkAsso]

I think it'd be easier if you did my homework k thanks

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

[@alaminhossain9062]

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

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

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

[@mfs1390034]

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

[@FlemerX]

Thank you

[@jeffparryncc1701]

You missed out on how to get to vs code??? Pointless video guys...

[@codingtechnology6779]

Awesome video! Inspired me to play with the code!

[@Music-jx1bh]

thank you very much

[@Amirrezarafieii]

great

[@dhruvrao517]

Thanks man awesome tutorial

[@uwushhsw5334]

What is this software using web design 🥺

[@ellsonmendesYT]

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

[@englisitupwithvale4381]

than kss dude! I follow you

[@mdnerobkhan7045]

Please give me sorce Code.....

[@MaxxedAura]

it doesn't work for me

[@simonpaulmier1370]

komen tu fé

[@nehagavali9416]

Can you give me code

[@mohammadnuruddin4596]

Great job

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

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

[@Lexiphy]

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

[@I卄卂尺几乇乇]

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

[@cogaiit4811]

Tks u very much

[@howtostudy123]

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

[@gurbanovsh]

Wowww 🧨🧨

[@jekaagung2741]

how to set the speed of transition?

[@briandesign]

should just be the value you put for duration

[@shlokshar]

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

[@sshakedi125wonder]

can add link to the code please?

[@noorkhaliq]

Much appreciated

[@raheelmalikox]

I love you work

[@raheelmalikox]

Bro thank u

[@anuragthakur5787]

great video man thank you very much

[@deiv1781]

Nice video man!

[@ananyasingha6437]

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

[@ThatSamm]

how can i add function to that button?

[@howtostudy123]

can i asked what theme do you use

[@hunterkohler3697]

AHHH DONT USE @import

[@axpect.]

Can I add a hyperlink to it?

[@giovannimichel5506]

Thank you for the intel.

[@Nelson.4E]

Thank you a lot. It works!