Interactivity is key for your app's success. And what I mean by that is we need to help guide a user and make our app as easy as possible for users to interact with.

So if a user hovers a button, well we need to do something—maybe change the color or something else. The same goes for an input. If a user clicks on an input, they need some visual feedback that something is happening and that they are being effective.

Let's have a look!

So here we have a Get Started button and if I hover this button it changes color, and the mouse cursor changes to a hand. Now this is great interactivity and I know that if I click this button something's going to happen, so let me try it. And there we go, my app is working as intended.

What if I try to click into this input? I can see the border change color.

This app is being interactive and giving a user feedback and helping to guide them through what they need to do, which is to log in.

Let's have a look at how we enable interactivity.

So let's first have a look at this button because this button has inherited the same style as the Get Started button that I showed you earlier.

Now the way to configure interactivity is via the Conditional tab in the property editor. I'm going to click on Conditional and I can see a few here; I can see when the button is hovered. I can also see if this button is hovered and this button isn't clickable and a few others.

Let's take a simple approach here because the interactivity or the conditionals are set in the style that's where we will edit them. So I'm going to head over to the style for primary and here we have a conditional statement that will apply to the primary button style.

So we can see that then when this button is hovered, the background style is changing to flat color and the background color is changing as well.

Why don't we adapt this a bit? So I'm going to select purple and I'm going to make it darker. Okay, just to simplify things I'm going to delete the other ones. Fantastic! Let's test this out.

So I made it a style which means it will work on all primary buttons and if I hover this button there you can see it's changing to a much darker purple color.

Let's head back into the Styles tab.

So currently we have one conditional statement that when this button is hovered, we are changing the background color. If we wanted to we can head down to the bottom of the Appearance tab, we can also change the style transition so how quickly or how long will it take for this conditional statement to be applied, and at the moment it's 200 milliseconds but I can slow that right down to say 500 milliseconds.

Let's try it out. Okay, hovering and that's a much slower transition.

What about our inputs that we looked at earlier? So if I click on this input, I can see that it has a blue outline. But I see a bit of color clashing here so what I'd really like is for just the border to change to black.

I'm going to scroll down and look for my inputs over here—standard input. Let's scroll across have a look at the Conditional tab, and we can see a hover effect when this input is focused. That's the one I'm interested in because that's when I click into the input and we have when this input is invalid and this is very significant for form validation to feedback to a user when they've maybe inputted the incorrect data or that they've left an input out.

But for now I'm going to keep this really simple. I'm going to delete the hover input and I'm going to change the border color for the focus. Let's change that to black. Let's test it.

And there we go!

Because we're using styles, it applies to all of the inputs.

Now the key thing about interactivity is to use it in a subtle way—don't go overboard on the animations just keep it subtle. Do enough so that a user knows that they are interacting with your app and what I tend to do is look at larger sites and larger apps to see how they do it and they often set the tone for what a user would expect from your own app.

I hope you enjoyed this lesson!