Our hero section looks great right now, but not very exciting to interact with. 1
When we move our mouse over the elements, they don't really react to it. 2
These are called mouseover or hover effects. In web design, 3
remember this law. 4
It's called Jacob's law of user experience. 5
The law says that: "Users spend most of their time on other sites." 6
What does that mean? 7
This means, that they expect for your site to work the same way, as all the other sites they already know. 8
If you try to be very original and make your site work in a different way than what users are used to, 9
you are going to end up with a very original ghost website, that everyone wants to leave instantly. 10
So, people have expectations for links and buttons to react when they move the mouse over it. 11
Adding hover effects in Webflow is quite simple and very fun. 12
This is managed under this dropdown called States. After selecting the Hover state from the dropdown, 13
any changes that you make to the styles, will apply to the hover state of that class. 14
And just like that, the button changes the opacity on hover. 15
States 16
now show a blue dot to indicate that a change has been made to the hover state. 17
There are other States like Pressed and Focused, but I won't go into those until we need it. 18
We haven't designed a hover states and Figma. 19
I don't do this in real client projects either. It's too much extra work, that isn't really necessary. 20
I come up with Hover effect on the go, during the Webflow building process. 21
This way, I can also visualize how it's behaving. 22
We can change almost every property on a hover. 23
A lot of fun animations can be created just from this. Although Webflow does have another way to build 24
animations and interactions. And it's super amazing, but more about that later. For buttons changing the 25
background fill is a good and simple way to add some simple hover effect. And changing the opacity 26
of the background fill is easy way to do that. 27
You can use that as your go to technique for a quick and simple effect. 28
It's easier than putting a different color. Another simple way would be to add a shadow on hover. 29
That's a common and fun animation, adds an extra layer of dimension. 30
Now with our ghost button here, we can't decrease the opacity, it's already transparent. But what we can 31
do, is to add thin layer of transparent white. Sort of like that button in the navbar. Adding white background 32
with 10-20% opacity. 33
For the button in the navbar, 34
either we can play with opacity again, or fill it with 100% white. 35
When you fill it with white, we have to change the text color too, because text is white and it doesn't 36
show. 37
Luckily we can change any style on hover, so without a problem, we can turn text into blue. 38
As for navigation links, we can do something similar. Like decrease opacity, change the color to 39
something else. Or we can do something even more interesting. 40
We can add a border underneath. I don't mean underline, 41
that's lame. 42
I mean a border underneath the entire link box. 43
We can do so under Border settings. Select the box that indicates the bottom border. 44
This should automatically select a solid line as a style. 45
If it doesn't, make sure you have it selected and it's not set on X. And change the color to white. 46
This is a nice hover effect. And suitable for us because we are using the link as an entire box, not just 47
the text. 48
So it shows that this whole thing is clickable. 49
We could bring this border closer to the text, by decreasing the bottom patting. But I actually like it 50
being spaced out like that. 51
There is one strange thing that is happening on hover. 52
Pay attention to how the content underneath shifts slightly, every time we hover around links. 53
That's certainly not nice. 54
The reason this is happening is because 2-pixel border adds to the available space dedicated to the 55
Nav links. So it pushes all the content down. 56
So, how do we fix this behavior? 57
We need to somehow make sure, the height of the nav link doesn't change on hover, because of the border. 58
And one way to do that is to add 2-pixel border 59
also on the regular state. 60
We can make it transparent, so it doesn't show. This way, nav link box has a 2-pixel border 61
either way. So it doesn't change sizes on hover. 62
The only thing that changes is the color. 63
That's a good solution. 64
The hover effects, right now, transition quite abruptly from one state to another. 65
It's a very instant, jerky jump. This instant jump might not be much, but it's too fast for us to register 66
the change, so it doesn't feel very natural and smooth. 67
Web designers in such cases add a little transition effect. So there is a slight time delay in transition. 68
We can add the transition style from here. Under a dropdown you'll see there are many transition types. 69
It's listing everything that can have a transition effect. Like an opacity of an element or a background 70
color. 71
Not every style can transition. 72
For example, you see a font name isn't listed. Because font change can't be animated. And many other typography 73
settings can. In our case, we want to transition a border color, which is an available option. 74
There are two more values Duration and Easing. Duration is what it exactly says - 75
how long does transition take in milliseconds. 76
The default value of 200 milliseconds is pretty good 77
for most hover effects. So you can leave it as is. 78
As for the Easing, it might look a little complicated, but they're quite simple. 79
In reality, these are sort of different formulas on how fast they go or accelerate, and how fast or slow 80
they sort of decelerate, when the transition is ending. 81
Let's leave this to the default "Ease", most of the time, it works perfectly fine. 82
And now, if you hover the nov links, you'll notice that border appears and disappears smoothly. And that's 83
just so much nicer than that jerky transition that was before. 84
One small thing to note, the transition effect has to be applied on the regular state, not on the hover 85
state. 86
That's just how CSS works. 87
OK. 88
The same thing we can do for buttons and their background transitions. 89
Often instead of selecting a specific transition type, 90
I actually like to select All Properties. 91
This will apply same transition settings to any hover effect. 92
It's just simpler way to do it. Instead of looking for a transition type every time we want to apply 93
some sort of different hover change. If one element has several properties that change on the hover, 94
like font color, background color, shadows, instead of adding 3 different transition types, you 95
can just add one that kind of applies to all. Unless we want to transition different effects in different 96
speeds. But those will be very rare occasions. 97
The same transition effect on the other buttons. And there we have it - all buttons and links transition 98
nice and smoothly. 99
All right. 100
So let's recap what we did in this video. 101
We've added hover effects to the links and buttons on our hero section. 102
The hover states are changed from these States in the styles panel. 103
We can change almost any style inside the hover state. And to make this state changes from regular to 104
hover look nice and smooth. 105
We can add Transitions from Effects settings.