A very short lesson now about button states. It's for creating a feedback for the user. So he knows what is happening where he is what will happen when he's pushing the button. So for example, even here in Inkscape, if you look at the toolbox, if I'm hovering the buttons, I can see the different states I can see which one is pushed, which one is active, and which one I'm over and which I could reach, I can click and activate. This is the same thing I want in my menu or in my game. And what I can do to achieve that is like I can have a normal state and the pushed or active state.

So I just applicate now my button and I can change the background color of it. For example, if it's a menu let's say this is my menu and I make it more visible. Then I know which one is active, because the one in the back with the background changes active. Usually there is a rule in web design that we only change one or two things on a button, not everything. In Game Design, you can be a bit more playful, obviously you can change your button totally grow things are part of it. You can do a lot of animation or anything when a user is selecting a button, it's up to you.

If it fits in the game you are creating then go just make it understandable. So this is one way to create it. If you are having a flat bottom like this. Just simply change the background so the user know very What I would do also if we have a button which is not flat. So to do that, I duplicate the object, I opened the color window and let's do it like this. Send it to the back.

And now I have a button which is looking a bit 3d because it has a thickness. And what else I can do is I can make my text duplicated and I'll show it to you in a second. I can make my text also stand out a bit. So I can create a letterpress effect, which is if but if a text is pushed into a surface It has a shadow. If the light is coming from here, then the shadow on the top and the brighter part on the lower edges. If I zoom out, it looks like this.

So I created a 3d looking button. And I can create a button state for it. Because now it looks like it's really touchable. You know, it's like I can push it with my finger and it's have so much when people know like, Okay, this is a button and I can touch it. So the one state I would do for it, it's the I want to do the opposite. So I move this one up.

So the button seems it's pushed in and I would make the background of the whole button not like this. Make the background of the whole button darker. So when I'm looking at it, what I see is that this one is standing out I can even give this a bit of a gradient as well. So this one yes. So this one is standing out and it's shining on the top and this one is pushed down. I can even make the middle text a bit darker which is zooming like crazy.

So this one is pushed in the shadow is coming from the top of it. And that's another state of a button this is active and this one is not active at the moment. So if I end up like this, you will see what I'm talking about. I have several buttons like this. I see which one is better. So this is button state and now we will move on to something more exciting and creating a bit more buttons like this one a bit more complex one