CSS unhover property

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>

The html isn't much, just a div conatining this, if you want i can provide it. — Mattia Marziali, Feb 07 '18 at 18:44

Temani Afif · Accepted Answer · 2018-02-07T18:52:46.647

14

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>

edited Feb 07 '18 at 18:52

answered Feb 07 '18 at 18:47

Temani Afif

245,468
26
309
415

Ryszard Bosiak · Answer 2 · 2018-02-07T19:14:55.297

3

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

edited Feb 07 '18 at 19:14

answered Feb 07 '18 at 18:55

Ryszard Bosiak

65
1
7

pay attention as transition-duration should be use with a unit [s or ms] and in this case it's useless because you will override it with transition later ... and there is no need to add the border property on hover – Temani Afif Feb 07 '18 at 19:06
Could you please explain what cubic-beizer is? – Mattia Marziali Feb 19 '18 at 20:36
1

Please find below definition from w3schools: https://www.w3schools.com/cssref/func_cubic-bezier.asp And here is tool to play it: http://cubic-bezier.com – Ryszard Bosiak Feb 20 '18 at 11:12

CSS unhover property

2 Answers2