[Button] Revealing labeled icon button

[GammaGames]

Revealing labeled icon button

I think the ability to have an icon button with an animated label that shows on hover would be a nice feature. I'm not sure if there's a more robust way to do it using js, but I did get an example working with just css:

The html looks like:

<a class="ui revealing green labeled icon button">
  <i class="check icon"></i> 
  <span class="label">
     Save
  </span>  
</a>

The css looks like:

.ui.revealing.labeled.icon.button {
  -webkit-transition: padding 0.4s ease-in-out;
  transition: padding 0.4s ease-in-out;
  padding-left: 2.57142857em !important;
  padding-right: 0 !important;
}

.ui.revealing.labeled.icon.button:hover {
  padding-left: 4.07142857em !important;
  padding-right: 1.5em !important;
}

.ui.revealing.button>.label {
  white-space: nowrap;
  -webkit-transition: max-width 0.4s ease-in-out;
  transition: max-width 0.4s ease-in-out;
  overflow: hidden;
  max-width: 0;
}

.ui.revealing.button:hover>.label {
  max-width: 10em;
}

A max-width of 10em is reasonable for my examples since I won't have any sentence length button labels.

Example

https://jsfiddle.net/ro2sbwkt/