'How do I keep CSS Skew while transforming a button's position? [duplicate]

I'm trying to make a futuristic-looking parallelogram button that also moves up when it has been hovered upon, however, when I try to transform the button to move up a few pixels, the button loses its skew properties that I used in the button class. Is there a way I can keep it while moving the button up? Here is my attempt

.button1 {
  width: 125px;
  height: 35px;
  transform: skew(-10deg);
  transition-duration: 0.2s;
  border: none;
  font-family: stem;
  font-size: 15px;
  color: white;
  user-select: none;
}

.button1:hover {
  cursor: pointer;
  transform: translateY(-3px);
}
<button class="button1"></button>
css


Solution 1:[1]

sure, you need combine your transforms

.button1:hover {
    cursor: pointer;
    transform: skew(-10deg) translateY(-3px);
}


.button1 {
    width: 125px;
    height: 35px;
    transform: skew(-10deg);
    transition-duration: 0.2s;
    border:none;
    font-family: stem;
    font-size: 15px;
    color:white;
    user-select: none;
    background: green;
}


.button1:hover {
    cursor: pointer;
    transform: skew(-10deg) translateY(-3px);
}
<button class="button1">
 wow
</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 stergen

Related Questions