Text twitches on hover

The transition time of the text skew needs to match the transition time of the button skew. When I set them both to 0.2s, they cancel each other out as intended.

.button {
  background: green;
  box-sizing: border-box;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  transform: skew(-20deg);
  transition: 0.2s;
  padding: 12px 56px;
}

/* This is my attempt to fix it. It worked. Partially :\ */
.button > .span {
  display: block;
  transition: 0.2s;
  transform: skew(20deg);
}
            
.button:hover > .span {
  transform: skew(-20deg);
}
            
.button:hover {
  transform: skew(20deg);
}
            
.button-yellow {
  border: 2px solid yellow;
}
<button class="button">
  <span class="span">I shouldn't twitch on hover</span>
</button>


Consider a pseudo element to avoid this bad effect:

.button {
  color: #fff;
  padding: 12px 56px;
  position:relative;
  z-index:0;
  background:none;
  border:none;
  outline:none;
}
.button:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: green;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transform: skew(-20deg);
  transition:0.2s;
}
           
.button:hover::before {
  transform: skew(20deg);
}
/* in case you want to keep the outline effect of the button*/
.button:active::before,
.button:focus::before {
  outline:1px solid blue;
}
<button class="button">
  <span class="span">I shouldn't twitch on hover</span>
</button>

Tags:

Css

Recent Posts