html - Hover effect on button: slide in from left, slide out from left

Question

I would like to create this hover effect on buttons:

On hover, the background color changes sliding in from the left side. If the mouse leaves the button the original background color is supposed to return but sliding in from the left.

Right now I have this code (both classes apply to the button):

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

I would like to have the hover background perish from the left side when leaving the button. Right now it perishes from the right side.

Can anybody help me with that?

Answer 1

Have you tried using @keyframes? There is an example below.

I added a spread of 0.01px, because otherwise the animation is flickering. I changed the sizes to em so the size can be changed without problems.

Next time please include your HTML!

.button_slide {
    border: 2px solid rgb(216, 2, 134);
    padding: 1.28571em 2.57143em;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 20px;
    letter-spacing: 1px;
    cursor: pointer;
    color: #d80286;
  animation: leave 0.4s forwards;
}

.slide_right:hover {
    animation: hover 0.4s forwards;
}

@keyframes hover {
    from {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
    to {
        box-shadow: inset 8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
}

@keyframes leave {
    from {
        box-shadow: inset -8.79928em 0 0 0.01px #d80286;
        color: #fff;
    }
    to {
        box-shadow: inset 0 0 0 0.01px #d80286;
    }
}

<button class="button_slide slide_right">
    Hello
</button>