HTML按钮从PNG的向上/向下/向下状态

我有三个PNG文件为我的向上/向上/向下按钮状态。HTML按钮从PNG的向上/向下/向下状态

如何在html中制作这样的按钮？

寻找类似：

<button id="myButton" upState="upstate.png" downState="downstate.png" overState="overState.png" onClick="someFunction()"/>

显然这不是它是如何工作的。但这就是我想要它工作的方式。制作这种按钮最简单/最好的方法是什么？不允许闪光。

来源

2012-10-03 RouterBox

CSS支持活动和悬停状态，除了释放按钮之外，其他所有状态都可以满足要求。

#myButton { 
width: 90px; 
height: 20px; 
background: url(defaultstate.png); 
} 

#myButton:hover { 
background: url(overstate.png); 
} 

#myButton:active { 
background: url(downstate.png); 
}

您可能不需要按钮释放状态。如果按钮提交表单或以其他方式将访问者发送到新的浏览器页面，则在页面开始刷新/加载之前，他们不可能注意到按钮释放。

来源

2012-10-03 22:04:07

有几种方法。一般来说，一个CSS精灵将是理想的（也就是说，一个图像可以保存所有3种图形状态，并且只是根据当前状态进行移动）。使用它是什么样子，你已经有了将是更简单的方法：

<style type="text/css"> 
#myButton { width: 100px; height: 30px; background: url('upstate.png'); } 
#myButton:hover { background: url('overstate.png'); } 
#myButton:active { background: url('downstate.png'); } 
</style>

如果你想知道如何去使用这个精灵的方法，检查出：http://css-tricks.com/css-sprites/

来源

2012-10-03 22:07:38 jenjenut233

添加到上面的帖子，CSS只会使用[hover]风格扩展器来解决你的[overState]状态。

如果您熟悉使用jQuery，您可以设置适当的事件处理如下：

$('#myButton').on('mousedown', function() { 
    $(this).css('background','url('downstate.png')'); 
}) 

$('#myButton').on('mousedup', function() { 
    $(this).css('background','url('upstate.png')'); 
}) 

$('#myButton').on('mouseover', function() { 
    $(this).css('background','url('overstate.png')'); 
}) 

$('#myButton').on('click', function() { 
    alert('myButton Clicked'); 
})

来源

2012-10-03 22:22:28

HTML按钮从PNG的向上/向下/向下状态

回答

相关问题