It’s very nice and simple idea how to present links on the websites. By using linear-gradient as a backgorund-image and transition, which changes background-size to the whole its possible hight. To achieve this smooth link background effect, add below code to desired HTML a tag class/id.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
text-decoration: none;
background-color: transparent;
display: inline-block;
color: inherit;
border-bottom: 2px solid #9c0;
background-image: linear-gradient(120deg,#9c0,#9c0);
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 100%;
transition: background-size .125s ease-in;
}
a:hover {
text-decoration: none;
background-size: 100% 100%;
cursor: pointer;
}
Colors and contrast matter not only because of the accesiility but also because of user experience, so play with text and background colors to get good transparency and readability. And here is the working example. Just hover over the link :).