CODEWITHSUNDEEP
cssanimationhover
stackken
stackken

Reputation: 63

How does the CSS button hover animation work?

I am trying to understand these block of code for button-hovering effect yet still confused.

I can understand when mouse over the button the .btn:hover::after kicks in and display the background(z=-1) button then expand it with transform: scaleX(1.4) scaleY(1.6);

However when mouse pointer move away from the button, the background button also does "shrinking" effect seems like from transform: scaleX(1.4) scaleY(1.6); to normal size. I just couldn't understand which line of code controls this mouse-away animation.

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;

}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
}

.btn--white {

  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

Upvotes: 0

Views: 102

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

The secret lies in transition: all 0.2s in the :link / :visited of the button. transition not only transitions in to the target state, but also out from the target state. Essentially, it's transition that's controlling both sides of the animation that you're seeing.

It's still the transform that's applying the actual offset, but transition is responsible for smoothly fading back and forth on whether the transform is applied or not -- without transition, the animation would simply 'jump' between the two states.

body {
  background: black;
}

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;
}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

.btn--white {
  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}
<a href="#" class="btn btn--white">Button</a>

Upvotes: 1

Related Questions