Problem

I'm trying to add a ease-out animation to a set of buttons, like this:

.

I created a SASS mixin with the ease-in-out and tried to apply it in every possible way, which this animation is working on other buttons, but not here.

What I've tried

This is the code which I have tried:

@mixin cubic-bezier($property: all, $duration: 0.4s, $ease: cubic-bezier(.17, .67, .83, .67)) {
    transition: $property $duration $ease;
    -webkit-transition: $property $duration $ease;
    -moz-transition: $property $duration $ease;
    -o-transition: $property $duration $ease;
}

/* Independent components */
.btn-con {
    @include flex-start;
    color: var(--color-white);
}

.main-btn {
    @include flex-start;
    border-radius: 30px;
    color: inherit;
    font-weight: var(--font-regular);
    position: relative;
    border: 1px solid var(--color-secondary);
    overflow: hidden;
    margin-bottom: 10px;

    .btn-text {
        padding: 0 1rem;
    }

    .btn-icon {
        @include flex-center;
        background-color: var(--color-secondary);
        width: 5vh;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        padding: 1rem;

        i {
            font-size: var(--text-small);
        }
    }

    &:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        transform: translateX(100%);
        z-index: -1;
        @include cubic-bezier;
    }

    &:hover {
        &:before {
            width: 100%;
            height: 100%;
            background-color: var(--color-secondary);
            transform: translateX(0);
        }
    }
}

To simplify and have a working code, here's the HTML and CSS:

.btn-con {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: black;
}

.main-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 30px;
  color: inherit;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
  margin-bottom: 10px;
}

.main-btn .btn-text {
  padding: 0 1rem;
}

.main-btn .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  color: white;
  width: 1vh;
  height: 1vh;
  border-radius: 50%;
  padding: 1rem;
}

.main-btn:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  -webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  -moz-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  -o-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.main-btn:hover:before {
  width: 100%;
  height: 100%;
  background-color: red;
  transform: translateX(0);
}

<div >
  <a href="test-link.com" >
    <span >Example button</span>
    <span > T </span>
  </a>
</div>

My Research

I tried to set the animation in every possible element. I tried to set the "main-btn" element with the transition, the :hover selector, :before selector, :hover:before, to no avail.

I've googled it, searched websites told me to use it on the "main-btn" but it's not working.

Question

How can I have an in and out animation for this button?

Thanks!

CodePudding user response：

• Remove the translate x property from both of "hover:before" and "before"
• Add the height 100% from hover:before to before and now it should work fine
• i would also recommend you to use this cubic-bezier(0.455, 0.03, 0.515, 0.955)

.btn-con {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: black;
}
.main-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 30px;
  color: inherit;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
  margin-bottom: 10px;
}
.main-btn .btn-text {
  padding: 0 1rem;
}
.main-btn .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  color: white;
  width: 1vh;
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 1rem;
}
.main-btn:before {
  content: "";
  position: absolute;
  width:0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.main-btn:hover:before {
  width: 100%;
  background-color: red;
}

<div >
  <a href="test-link.com" >
    <span >Example button</span>
    <span > T </span>
  </a>
</div>