Hello,
Learn how to change the color or any CSS property of a link or any element using just CSS. This is useful for example when you are using <a>s to simulate a button and want to create a clickable effect when hovered.
Let’s say we have a link with the class ‘link‘:
<a href='#' class='link'>SOME LINK</a>
and the CSS for the class link is:
a.link {
padding:5px;
text-align:center;
background-color:#000;
}
and we want the button’s background to turn white when hovered.
1. We will use the keyword hover in our CSS to add new properties for when it is hovered. We will use it like this:
a.link:hover {
}
2. Now let’s change the background color for that case:
a.link:hover {
background-color:white;
}
Our complete CSS would be:
a.link {
padding:5px;
text-align:center;
background-color:#000;
}
a.link:hover {
background-color:#fff;
}
You can add any property you want. For example, you can change its opacity, decoration, font size, font color, width, etc. The possibilities are endless. If you have any questions or comments, please do not hesitate to contact me.
Best Regards,
Richi
