CSS unhover property [duplicate]

Question

Im trying to animate a round border, that becomes square when you hover, and goes back to a circle after you unhover. Despite my best efforts, i can't seem to make it work. Here is what i have so far.

@keyframes mymove {
  from {
    border-radius: 100% 100%;
  }
  to {
    border-radius: 0px, 0px;
  }
}

@keyframes mymoveback {
  from {
    border-radius: 0px 0px;
  }
  to {
    border-radius: 100%, 100%;
  }
}

.testButt {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 3s;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation: mymoveback 3s;
  animation-fill-mode: forwards;
}

.testButt:hover {
  -webkit-animation-fill-mode: forwards;
  animation: mymove 2s;
  animation-fill-mode: forwards;
}

<br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<div class="testButt">
  <br><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Log In
</div>

Answer 1

You over complicate it, simply use transition like this:

.testButt {
  width: 100px;
  height: 100px;
  padding:40px 0;
  text-align:center;
  box-sizing:border-box;
  background: red;
  position: relative;
  border-radius: 50%;
  transition: 0.5s;
}

.testButt:hover {
  border-radius: 0%;
}

<div class="testButt">
  Log In
</div>