Tuesday, June 9, 2020
Why Your Links Need a Hover Effect
Links contain text, but they should never look like text. When users read a web page, they need to be able to distinguish what’s clickable. If your links don’t have enough contrast, users could miss them. Most sites make their links a different color from their text. But that’s not enough contrast for colorblind users. The difference in color is hard for them to see. Colorblind users have to rely on their cursor change (arrow to hand) as feedback.
A hover effect can give them a clear signal to see what’s clickable. When users move their cursor over a link, they’ll notice a change in color or shape that tells them to click. This prevents them from missing links. One of the essential parts of a website is a text link. By clicking an anchor tag you can go anywhere from the site as it points to a specific page.
Typical links contain simple hover effects such as use of a simple color change when the mouse is pointed or clicked. But there are ways to make this effect even better.
Here I am going to show you some simple link hover effects that you can use when writing your blogger posts.
These are simple HTML codes that you can copy and paste when writing your posts in the editor's HTML compose mode.
Move your mouse over links to see the changes.
This link will change its color
<html>
<head>
<style>
a.model1:hover, a.model1:active {color: #a78fc4;}
</style>
</head>
<body>
<p><a class="model1" href="default.asp">This link will change its color</a></p>
</body>
</html>
This link will change its font-size
<html>
<head>
<style>
a.model2:hover, a.model2:active {font-size: 160%;}
</style>
</head>
<body>
<p><a class="model2" href="default.asp">This link will change its font-size</a></p>
</body>
</html>
This link will change its background-color
<html>
<head>
<style>
a.model3:hover, a.model3:active {background-image: linear-gradient(45deg,rgb(179,105,243) 30%,#da22ff 90%);
color: #fff;
padding: 0.2em;
border-radius: 3px;
margin: 1em 0;}
</style>
</head>
<body>
<p><a class="model3" href="default.asp">This link will change its background-color</a></p>
</body>
</html>
This link will change its font-family
<html>
<head>
<style>
a.model4:hover, a.model4:active {font-family: arial;}
</style>
</head>
<body>
<p><a class="model4" href="default.asp">This link will change its font-family</a></p>
</body>
</html>
This link will change its text-decoration
<html>
<head>
<style>
a.model5:visited, a.model5:link {text-decoration: none;}
a.model5:hover, a.model5:active {text-decoration: underline;}
</style>
</head>
<body>
<p><a class="model5" href="default.asp">This link will change its text-decoration</a></p>
</body>
</html>
Instructions
1. In all the examples they must change default.asp with the destination link.
2. In the first example to change the color of the link you must change the color #a78fc4 with the HEX color you want.
3. In the second example they should change the percentage of increase in the text size 160% with the percentage they like.
4. In example number 3 if you want to change something it is the color of the gradient that covers the link in the hover effect. Change the color of the gradient linear-gradient(45deg,rgb(179,105,243) 30%,#da22ff 90%) with another for example linear-gradient(45deg,rgb(179,105,243) 30%,#da22ff 90%)
5. Example 4 is an effect that changes the font-family when the maus goes over the link. To change this must change font-family: arial with another one. For example font-family: monospace
6. For example 5 the effect add font decoration to the link in this case underline. If you whant to change this use overline , line-through , underline overline or another one.