Html Question posted in
Some basic documentation can be found here.

Html – Start transition effect on border radius

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.

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    Alternatively, you can use clip-path property to clip everything that is outside of the border of the button.

    #login-now {
  position: relative;
  font-size: 18px;
  color: white;
  background-color: #00a295;
  padding: 13px 94px 13px 94px;
  border-radius: 10px;
  line-height: 2.5;
  clip-path: border-box;
}

#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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search