0
1
00:00:00,270 --> 00:00:04,650
Our hero section looks great right now, but not very exciting to interact with.
1

2
00:00:04,710 --> 00:00:08,910
When we move our mouse over the elements, they don't really react to it.
2

3
00:00:08,910 --> 00:00:12,750
These are called mouseover or hover effects. In web design,
3

4
00:00:12,750 --> 00:00:14,190
remember this law.
4

5
00:00:14,190 --> 00:00:17,160
It's called Jacob's law of user experience.
5

6
00:00:17,250 --> 00:00:21,720
The law says that: "Users spend most of their time on other sites."
6

7
00:00:21,720 --> 00:00:22,980
What does that mean?
7

8
00:00:22,980 --> 00:00:29,560
This means, that they expect for your site to work the same way, as all the other sites they already know.
8

9
00:00:29,610 --> 00:00:35,040
If you try to be very original and make your site work in a different way than what users are used to,
9

10
00:00:35,170 --> 00:00:40,140
you are going to end up with a very original ghost website, that everyone wants to leave instantly.
10

11
00:00:40,140 --> 00:00:45,140
So, people have expectations for links and buttons to react when they move the mouse over it.
11

12
00:00:48,080 --> 00:00:51,370
Adding hover effects in Webflow is quite simple and very fun.
12

13
00:00:51,380 --> 00:00:57,380
This is managed under this dropdown called States. After selecting the Hover state from the dropdown,
13

14
00:00:57,770 --> 00:01:03,620
any changes that you make to the styles, will apply to the hover state of that class.
14

15
00:01:04,100 --> 00:01:07,580
And just like that, the button changes the opacity on hover.
15

16
00:01:11,780 --> 00:01:12,230
States
16

17
00:01:12,230 --> 00:01:17,870
now show a blue dot to indicate that a change has been made to the hover state.
17

18
00:01:17,870 --> 00:01:22,400
There are other States like Pressed and Focused, but I won't go into those until we need it.
18

19
00:01:22,430 --> 00:01:24,270
We haven't designed a hover states and Figma.
19

20
00:01:24,350 --> 00:01:29,560
I don't do this in real client projects either. It's too much extra work, that isn't really necessary.
20

21
00:01:29,630 --> 00:01:33,790
I come up with Hover effect on the go, during the Webflow building process.
21

22
00:01:33,800 --> 00:01:36,110
This way, I can also visualize how it's behaving.
22

23
00:01:39,010 --> 00:01:41,020
We can change almost every property on a hover.
23

24
00:01:41,030 --> 00:01:46,640
A lot of fun animations can be created just from this. Although Webflow does have another way to build
24

25
00:01:46,820 --> 00:01:53,500
animations and interactions. And it's super amazing, but more about that later. For buttons changing the
25

26
00:01:53,500 --> 00:01:58,750
background fill is a good and simple way to add some simple hover effect. And changing the opacity
26

27
00:01:58,750 --> 00:02:01,330
of the background fill is easy way to do that.
27

28
00:02:01,570 --> 00:02:04,740
You can use that as your go to technique for a quick and simple effect.
28

29
00:02:04,750 --> 00:02:10,260
It's easier than putting a different color. Another simple way would be to add a shadow on hover.
29

30
00:02:10,270 --> 00:02:13,860
That's a common and fun animation, adds an extra layer of dimension.
30

31
00:02:14,020 --> 00:02:18,700
Now with our ghost button here, we can't decrease the opacity, it's already transparent. But what we can
31

32
00:02:18,700 --> 00:02:25,390
do, is to add thin layer of transparent white. Sort of like that button in the navbar. Adding white background
32

33
00:02:25,390 --> 00:02:27,160
with 10-20% opacity.
33

34
00:02:38,310 --> 00:02:39,510
For the button in the navbar,
34

35
00:02:39,510 --> 00:02:43,440
either we can play with opacity again, or fill it with 100% white.
35

36
00:02:46,980 --> 00:02:51,390
When you fill it with white, we have to change the text color too, because text is white and it doesn't
36

37
00:02:51,390 --> 00:02:51,780
show.
37

38
00:02:51,900 --> 00:02:56,430
Luckily we can change any style on hover, so without a problem, we can turn text into blue.
38

39
00:03:03,760 --> 00:03:08,390
As for navigation links, we can do something similar. Like decrease opacity, change the color to
39

40
00:03:08,390 --> 00:03:12,000
something else. Or we can do something even more interesting.
40

41
00:03:12,170 --> 00:03:15,830
We can add a border underneath. I don't mean underline,
41

42
00:03:15,830 --> 00:03:16,590
that's lame.
42

43
00:03:16,640 --> 00:03:19,860
I mean a border underneath the entire link box.
43

44
00:03:19,940 --> 00:03:25,410
We can do so under Border settings. Select the box that indicates the bottom border.
44

45
00:03:25,430 --> 00:03:28,500
This should automatically select a solid line as a style.
45

46
00:03:28,520 --> 00:03:36,340
If it doesn't, make sure you have it selected and it's not set on X. And change the color to white.
46

47
00:03:41,190 --> 00:03:46,370
This is a nice hover effect. And suitable for us because we are using the link as an entire box, not just
47

48
00:03:46,370 --> 00:03:46,810
the text.
48

49
00:03:46,830 --> 00:03:49,530
So it shows that this whole thing is clickable.
49

50
00:03:49,620 --> 00:03:55,080
We could bring this border closer to the text, by decreasing the bottom patting. But I actually like it
50

51
00:03:55,080 --> 00:03:56,770
being spaced out like that.
51

52
00:03:56,810 --> 00:03:59,340
There is one strange thing that is happening on hover.
52

53
00:03:59,340 --> 00:04:04,740
Pay attention to how the content underneath shifts slightly, every time we hover around links.
53

54
00:04:04,800 --> 00:04:06,450
That's certainly not nice.
54

55
00:04:06,450 --> 00:04:11,340
The reason this is happening is because 2-pixel border adds to the available space dedicated to the
55

56
00:04:11,340 --> 00:04:14,570
Nav links. So it pushes all the content down.
56

57
00:04:14,700 --> 00:04:16,960
So, how do we fix this behavior?
57

58
00:04:16,980 --> 00:04:22,680
We need to somehow make sure, the height of the nav link doesn't change on hover, because of the border.
58

59
00:04:22,890 --> 00:04:25,320
And one way to do that is to add 2-pixel border
59

60
00:04:25,320 --> 00:04:27,030
also on the regular state.
60

61
00:04:30,830 --> 00:04:36,540
We can make it transparent, so it doesn't show. This way, nav link box has a 2-pixel border
61

62
00:04:36,560 --> 00:04:39,400
either way. So it doesn't change sizes on hover.
62

63
00:04:39,410 --> 00:04:41,640
The only thing that changes is the color.
63

64
00:04:41,660 --> 00:04:42,650
That's a good solution.
64

65
00:04:45,610 --> 00:04:50,340
The hover effects, right now, transition quite abruptly from one state to another.
65

66
00:04:50,380 --> 00:04:57,700
It's a very instant, jerky jump. This instant jump might not be much, but it's too fast for us to register
66

67
00:04:57,700 --> 00:05:01,960
the change, so it doesn't feel very natural and smooth.
67

68
00:05:01,960 --> 00:05:07,730
Web designers in such cases add a little transition effect. So there is a slight time delay in transition.
68

69
00:05:07,840 --> 00:05:14,770
We can add the transition style from here. Under a dropdown you'll see there are many transition types.
69

70
00:05:14,770 --> 00:05:20,290
It's listing everything that can have a transition effect. Like an opacity of an element or a background
70

71
00:05:20,290 --> 00:05:21,340
color.
71

72
00:05:21,400 --> 00:05:22,900
Not every style can transition.
72

73
00:05:22,900 --> 00:05:29,650
For example, you see a font name isn't listed. Because font change can't be animated. And many other typography
73

74
00:05:29,650 --> 00:05:35,720
settings can. In our case, we want to transition a border color, which is an available option.
74

75
00:05:35,740 --> 00:05:40,150
There are two more values Duration and Easing. Duration is what it exactly says -
75

76
00:05:40,150 --> 00:05:43,370
how long does transition take in milliseconds.
76

77
00:05:43,390 --> 00:05:46,230
The default value of 200 milliseconds is pretty good
77

78
00:05:46,230 --> 00:05:49,000
for most hover effects. So you can leave it as is.
78

79
00:05:49,090 --> 00:05:53,460
As for the Easing, it might look a little complicated, but they're quite simple.
79

80
00:05:53,620 --> 00:06:01,600
In reality, these are sort of different formulas on how fast they go or accelerate, and how fast or slow
80

81
00:06:01,780 --> 00:06:04,630
they sort of decelerate, when the transition is ending.
81

82
00:06:05,320 --> 00:06:09,550
Let's leave this to the default "Ease", most of the time, it works perfectly fine.
82

83
00:06:11,090 --> 00:06:17,090
And now, if you hover the nov links, you'll notice that border appears and disappears smoothly. And that's
83

84
00:06:17,090 --> 00:06:20,930
just so much nicer than that jerky transition that was before.
84

85
00:06:20,990 --> 00:06:25,550
One small thing to note, the transition effect has to be applied on the regular state, not on the hover
85

86
00:06:25,550 --> 00:06:26,080
state.
86

87
00:06:26,210 --> 00:06:28,030
That's just how CSS works.
87

88
00:06:28,220 --> 00:06:28,510
OK.
88

89
00:06:28,520 --> 00:06:31,790
The same thing we can do for buttons and their background transitions.
89

90
00:06:34,830 --> 00:06:37,380
Often instead of selecting a specific transition type,
90

91
00:06:37,380 --> 00:06:39,390
I actually like to select All Properties.
91

92
00:06:39,390 --> 00:06:42,830
This will apply same transition settings to any hover effect.
92

93
00:06:42,850 --> 00:06:47,850
It's just simpler way to do it. Instead of looking for a transition type every time we want to apply
93

94
00:06:47,850 --> 00:06:52,340
some sort of different hover change. If one element has several properties that change on the hover,
94

95
00:06:52,350 --> 00:06:57,900
like font color, background color, shadows, instead of adding 3 different transition types, you
95

96
00:06:57,900 --> 00:07:03,180
can just add one that kind of applies to all. Unless we want to transition different effects in different
96

97
00:07:03,180 --> 00:07:05,670
speeds. But those will be very rare occasions.
97

98
00:07:22,670 --> 00:07:27,680
The same transition effect on the other buttons. And there we have it - all buttons and links transition
98

99
00:07:27,680 --> 00:07:28,850
nice and smoothly.
99

100
00:07:32,800 --> 00:07:33,280
All right.
100

101
00:07:33,280 --> 00:07:35,570
So let's recap what we did in this video.
101

102
00:07:35,600 --> 00:07:40,120
We've added hover effects to the links and buttons on our hero section.
102

103
00:07:40,120 --> 00:07:44,240
The hover states are changed from these States in the styles panel.
103

104
00:07:44,320 --> 00:07:49,780
We can change almost any style inside the hover state. And to make this state changes from regular to
104

105
00:07:49,780 --> 00:07:51,250
hover look nice and smooth.
105

106
00:07:51,250 --> 00:07:54,070
We can add Transitions from Effects settings.