How to change hover color & animate my button in HTML & CSS

Hey there, up until now our button has just set there, not doing very much, but now watch when I move my mouse over, it's faded in green, that is called a Pseudo Class. We're going to use the Pseudo Hover. I'll show you how to do it now in VS code. 

Currently my button has no hover. When I mouse over it I get the kind of Mickey Mouse hand, but I don't get that hover like you saw in the intro. The way to get that is something called a Pseudo Class, because this A-tag here has more than one kind of state. It has a 'not being touched' state, it has a 'hover’ state, it has a 'when I click it' state, and it has 'I've been there before' state. Those are not the technical words but you get what I mean. 

There's a kind of-- it does a few different things, and you can attack them by creating a Pseudo Class. The Pseudo Class works like this. I'm going to do it to my button, because that's what I've got applied to this thing. So you create another Class, and you say, my button, okay, I spelled it right. You need-- I would like to attack the hover, and the way a Pseudo Class works is that it all needs to be joined up, and it needs to say that, so I'm going to be attacking the hover, the hover state of this button, and what are we going to do? 

I'm going to change the background color, and I'm going to pick something. Put my semicolon. Select it, I'm going to pick probably something a little bit warmer up in here. And hopefully now when I preview it, I can hover above it, there you go. That has a pseudo state of hover that I've found and changed. Cool, huh. 

You might have noticed in the intro, I made it fade, let's do that. So in css3 we can do a transition, transition duration, so it's going to do, how long? We'll do 1 second. So it's going to take 1 second for this thing to activate. Let's give it a preview, ready? Ooh! Cool, huh! 

Now we've looked at the Hover state, there are other ones. I'm just showing you w3schools.com for the different Pseudo classes. That's the one we've talked about, let's have a look at their-- so there's Down hover, it's the main one you're going to do. I never touch Visited link or Active, but let's have a little look just so you know what they are. 

So at the moment-- it's red if you haven't clicked it. I've already clicked it so it's green. So I've visited this, so it's green, when I mouse over, it's hot pink. There you go, that's what we've done, the hover, and this one here, when it's active it goes blue. Watch this, when I click it, it goes blue for a second. I never color that, because who is going to see, because I click it like this, like a normal person. Super fast, and you never see the color change. It's up to you though, you might be loving changing the active color, you can see, just the syntax, it's a colon, 'a:', and then these are predefined. 

It's going to make sure that it's the colon in between. There's lots of other Pseudo classes, down the bottom of this w3schools, there's a bunch of different ones. We're going to cover a few more of them in the next video. So yeah, we'll cover the ones that I use anyway. Lots of them in here I've never had a chance to use, but yeah, there are lots of Pseudo classes outside of just hover. Let's jump into the next video and check a few of them out.