Un bouton dont l'icone change au survol

Bonjour tout le monde

J'aimerais faire un bouton dont l'aspect change au survol. Je vous ai fait un gif pour vous montrer (désolé pour la mauvaise qualité du gif, j'ai fait ça rapidement...). J'ai bien ma petite idée sur la façon de faire, mais je pense que ma méthode n'est pas la meilleure (j'ai utilisé jquery pour changer la classe du bouton). Pourriez vous s'il vous plait me donner une méthode propre, peut-être est il possible de faire ce genre d'icones en full css ?
Pour voir le gif:
https://imgflip.com/gif/igzar

Merci de m'avoir lu et bonne soirée !

salut,
ce genre de chose est très simple à faire et je suppose qu'il doit exister des tas de tutos sur le web.
Tu peux voir un exemple mais il faut savoir que ce ne sont pas tous les navigateurs qui appliquent des transitions sur les pseudo-éléments. Tu pourrais passer par des <span> à la place.

Après... les pseudo-éléments étant compatibles dès IE8, pour la plupart des sites c'est ok (sans les animations pour IE8 et IE9). Et cela peut être vu comme une amélioration progressive.