Hover effect
Lesson 7 of 8 in Coddy's CSS Project - Fancy Button course.
Let's make some effect when the button is hovered!
To change the button when hovered we use the :hover pseudo class,
.fancyButton:hover {
background-color: red;
}In the above example our button will get red once hovered!
To make the transition smooth use,
.fancyButton {
...
transition: all 0.2s;
}You can play with the transition time (0.2s).
Challenge
EasyAdd hover effect to your button, make it nice!
Required tasks:
- Add transition property to your button, timing of your choose, under or equal to 1 second.
- Add
opacity: 0.8;to your hover button effect.
Optional and suggested properties to change on hover:
- shadows (
box-shadow) - background color
Try it yourself
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>