1

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>
Arman Ebrahimi
  • 2,035
  • 2
  • 7
  • 20
nmarmatak
  • 23
  • 3
  • 1
    To do multiple transforms you only need a space between them, when you apply the single transform on hover it overwrites the existing transform. Check it out on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/transform – JHeth Mar 12 '22 at 08:53
  • Interesting. I tried this earlier and it didn't work. Anyway, it works now so thanks. – nmarmatak Mar 12 '22 at 08:54

1 Answers1

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>
stergen
  • 36
  • 2