2012-07-24 66 views
0

嘿我有刷新按钮在HTML中,我想旋转按钮上的图像,当我点击它。我已经使用CSS如下创建效果:我怎样才能旋转图像显示在HTML按钮

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()" /> 
+0

如果在按钮没有文字只需旋转按钮:主动使用CSS3转换。 – SVS 2012-07-24 09:01:13

+0

@SVS ya在按钮上有文字 – Vinay 2012-07-24 09:04:15

+0

CSS3还没有完全支持,我建议你创建一个活跃的伪指令类,使用一些照片编辑器自己旋转图像并使用它,当然你不会得到平滑的时刻,但它'将支持所有浏览器 – 2012-07-24 09:09:29

回答

0

试试这个

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

入住这DEMO

编辑:增加了一个演示

+0

仍然不能正常工作 – Vinay 2012-07-24 11:40:35

+0

它应该工作。检查更新的演示。点击按钮,图像变化.. – 2012-07-24 12:52:42

0

嗨认为你可以按照外国人的方式。除此之外,您可以保留一个标志,并相应地通过调用特定的css类来旋转图像。

相关问题