Archived topic
hover link animation css
3 replies · Started by Halil on December 21, 2022
Viewing posts 1–4 of 4
hi,
For blog posts only, I've added below code to make a hover effect for links. It works fine, but I want a little bit different animation, hover link color should start filling up the link from bottom to top. Could you pls help me with that? I've added a sample link
body.single-post .entry-content a {
padding: 0em .2em;
transition: all 0.3s;
}
body.single-post .entry-content a:hover{
background-color: #444fe520;
color:#444fe5;
}Hi Halil,
Try this CSS:
.entry-content a {
background-repeat: no-repeat;
background-size: 100% 0;
background-position: 0 111%;
transition: all 0.3s ease;
}
.entry-content a:hover{
color:#444fe5;
background-image: linear-gradient(to bottom, #444fe520 0%, #444fe520 100%);
background-size: 100% 100%;
}Perfect, huge thanks Ying : )
No Problem, glad to help :)
This archived topic is closed to new replies.