how can i rotate image displayed on html button

Question

hey I have refresh button in HTML and i want to rotate the image on that button when I click it. I have created effects using css as follows:

 input.button_refresh {

margin-left: 600px;
background: url("../images/refresh.JPG") 0 0 no-repeat scroll ;
background-position: right;
font-weight: bold;
background-color: rgb(80,140,210);
display: inline-block;
cursor: pointer;
height: 20px; /* height of the background image */
width: 70px; /* width of the background image */
color: threedface;
border-radius: 6em;
 }

HTML

<input type="image" name="Refresh" value="Refresh" class="button_refresh" onclick="window.location.reload()" />

Answer 1

Hi think you can follow Alien's way. In addition to that you can keep a flag and accordingly rotate the image by calling the particular css class.

Answer 2

Try this

input.button_refresh:active {
  background: url("../images/otherImage.JPG") 0 0 no-repeat scroll ; /* other image or rotated image */
}

Check this DEMO

Edit : Added a Demo