How can I change the transition "outro"? (CSS transform)

Question

So i want to create a button, which moves upwards an creates a Little shadow underneath, if hovered and that is working out so far, but the problem is, the Animation just resets, if i stop hovering, while it should kind of play the animation backwards. In all examples I have seen it just does that without any extra command. For example: My button moves upwards by 5 pixels in .3 seconds if hovered, if you stop hovering it should move downwards 5 pixels in 0.3 seconds again, but it just does it instantly.

I would really appreciate any help on the concern, i just can't comprehend it.

Here is the Code i use:

<head>

.probtn {
  border-color: #282E34;
  color: #282E34;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  transition: all 0.3s;
  transform-origin: bottom;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}

</head>

<Body>

<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

</Body>

Uchendu · Accepted Answer · 2020-05-15T09:22:29.553

Define the transition: all 0.3s; on your .probtn class instead of the :hover. Else once the hover-state is removed the transition property is removed as well.

.probtn {
  border-color: #282E34;
  color: #282E34;
  transition: all 0.3s; /* moved to base class instead of hover state */
  transform-origin: bottom;
}

.probtn:hover {
  background-color: #282E34;
  color: white;
  box-shadow: 0px 5px 5px 0px gray;
  transform: translate(0px,-5px);
  -webkit-transform: translate(0px,-5px);
  -moz-transform: translate(0px,-5px);
  -ms-transform: translate(0px,-5px);
  -o-transform: translate(0px,-5px);
}

.btn {
  border: 2px solid #282E34;
  background-color: white;
  color: #282E34;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5Px;
}

<button class="btn probtn" type="button" onClick="kundenon()">Unsere Kunden</button>

How can I change the transition "outro"? (CSS transform)

1 Answers1