Текст дергается при наведении

Question

В настоящее время изучаем CSS и вот задача: сделать кнопку ромба, которая меняет направление при наведении курсора. Я сделал это, но кнопка дергала свой текст при наведении курсора. Можно ли это исправить? В данный момент я застрял. Я пытался найти, но ничего не найдено.

.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: 0s;
  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>

Буду признателен за любую помощь!

Answer 1

Время transition перекоса текста должно соответствовать времени transition перекоса кнопки. Когда я устанавливаю для них обоих значение 0.2s, они взаимно отменяют друг друга, как и предполагалось.

.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>

Answer 2

Рассмотрим псевдоэлемент, чтобы избежать этого плохого эффекта:

.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>