Recently, I was on the Half-Life Alyx website and came across an interesting button animation. As you hover over the button the background comes across from the left and fills the button whilst changing the text's colour. The background is also slightly skewed, which is a nice touch. I've seen this type of button animation before but I've never actually done it myself. So I thought it would be fun to make my own version.

Here are the styles.

.Button {
outline: none;
border: 2px solid #2d4059;
font-size: 1.4rem;
padding: .7em 1.2em;
background: transparent;
color: white;
overflow: hidden;
z-index: 1;
font-weight: bold;
box-shadow: 8px 8px #2d4059;
cursor: pointer;
transition: color 150ms linear;

&:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 140%;
  height: 105%;
  background: white;
  transform: skew(-33deg, 0) translateX(-110%);
  transition: transform 150ms linear;
  z-index: -1;
  }

  &:hover {
    color: #2d4059;
    transition: color 150ms linear;
    &:before {
      transform: skew(-33deg, 0) translateX(-10%);
      transition: transform .25s linear;

    }
  }
}

Breakdown

• The z-index is very important here because we don't want the pseudo-element to cover the button text. To solve that problem we set the pseudo-element ::before to a lower z-index than the button.

• We're also skewing the background so that it has a sharp edge as it comes into view.

• Next, we set the transition to start when the button has an on:hover event. Here we just translate the ::before element to -10% (which fills the background) and change the button text to a darker colour (so it can stand out from the white background).

If you're interested in seeing the original button animation, you can check out the Half-Life Alyx website.

And that's it! Hope you enjoyed it!