I leave you an example that I did, I hope it helps you:
What I did was that only the arrow rotates, look at the css, there I indicate where it has to rotate, if you need it to be in another direction you have to change the degrees.
Cheers
ps: the name of the button and the arrow were not centered but for didactic topics it works
#flecha {
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
}
#flecha.rotamasmas {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
I changed the css and added jquery, and at the end a function, in this way I say "when you hover over the button, add a class to the arrow and when the hover finishes, remove the class"
I leave you an example that I did, I hope it helps you:
What I did was that only the arrow rotates, look at the css, there I indicate where it has to rotate, if you need it to be in another direction you have to change the degrees.
Cheers
ps: the name of the button and the arrow were not centered but for didactic topics it works
I changed the css and added jquery, and at the end a function, in this way I say "when you hover over the button, add a class to the arrow and when the hover finishes, remove the class"
Starting from Sebastián Miranda 's answer , I put the solution only with CSS. When the pointer is placed over the button, the icon rotates 90º: