Why does having a transition for a icon not occur when the button is unhovered?

user_15103611 0
Viewed 71

I wanted to add a effect where an icon showed up and disappeared smoothly when the button is hovered. The effect occurs with no issues when the button is hovered, but unlike other effects, it only works one way.

Note: I used Ionicons but the issue persists with several other icon libraries.

button {
  font-size: 20px;
  transition: 0.2s;
  overflow: hidden;
}

.buttonicon {
  position: relative;
  font-size: 25px;
  margin-bottom: -6px;
  left: 100%;
  width: 0;
}

button:hover .buttonicon {
  transition: 1s;
  left: 0;
  width: 20px;
}
<script src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<button>
  Button Text
  <ion-icon class="buttonicon" name="chevron-forward-outline"></ion-icon>
</button>

css-transitions css html
2 Answers

Change your css, you can add

transition: 1s

to .buttonicon instead of :hover selector. In this way the transition property will be applied to all transitions regarding the button, so you'll have the "smooth" effect.

user_150675720

It's quite Simple Rather than adding Transition Property on button:hover .buttonicon class apply transition on buttonicon your final output will be look like this.

.buttonicon {
  position: relative;
  font-size: 25px;
  margin-bottom: -6px;
  left: 100%;
  width: 0;
  transition: 1s;
}

button:hover .buttonicon {
  left: 0;
  width: 20px;
}
user_77709420
Related