CSS unhover property [duplicate] - html

Question

This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 5 years ago.
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>
<div class="testButt">
<br><br> 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>

Answer 2

Something like this:
HTML:
<button>Hover Me!</button>
And CSS:
button {
display: block;
width: 60px;
height: 60px;
text-decoration: none;
padding: 5px;
border: 1px solid red;
border-radius: 30px;
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
}
button:hover {
border-radius: 0;
}
And link to fiddle:
Hover and round animation