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的向上/向下/向下狀態

回答

相關問題