Issue
I have a transition set on an element but the effect starts outside of the border radius I set.
I want the effect to start INSIDE the border.
#login-now {
position: relative;
font-size: 18px;
color: white;
background-color: #00a295;
padding: 13px 94px 13px 94px;
border-radius: 10px;
line-height: 2.5;
}
#login-now-text {
position: relative;
z-index: 2;
}
#login-now:after{
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
content: "";
border-radius: 10px;
background-color: #007d73;
transition: all .35s;
}
#login-now:hover:after{
width: 100%;
}
<a id="login-now">
<span id="login-now-text">Log in</span>
</a>
Image to my problem: https://imgur.com/a/LEv1kmb
I tried to add ease-in
and set the top
value to another number but that didn't worked for me.
Solution
You can use overflow:hidden
to hide anything that falls outside of the border. But then your <a>
tag has to be a block. Then you can also remove the border-radius
on the hover effect.
#login-now {
position: relative;
font-size: 18px;
color: white;
background-color: #00a295;
padding: 13px 94px 13px 94px;
border-radius: 10px;
line-height: 2.5;
display: inline-block;
overflow: hidden;
}
Answered By - Kokodoko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.