I have three png files for my up/over/down button states.

How do I make such a button in html?

Looking for something like:

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

Obviously that's not how it works. But that's how I want it to work. What is the easiest/best way to make such a button. No flash allowed.

I have three png files for my up/over/down button states.

How do I make such a button in html?

Looking for something like:

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

Obviously that's not how it works. But that's how I want it to work. What is the easiest/best way to make such a button. No flash allowed.

• javascript
• html
• css

3 Answers 3

CSS supports active and hover states which would suffice for all except button release.

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

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

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

It may be likely that you wouldn't need a button release state. If the button is submitting a form or otherwise sending the visitor to a new browser page, they aren't likely to notice the button release before the page starts to refresh/load.

A couple of ways. Generally a CSS sprite would be ideal (that is, a single image that holds all 3 of your graphic states and just shifts based on the current state). The simpler approach using what it looks like you've got would be:

<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>

If you want to know how to go about this using the sprite method, check out: http://css-tricks./css-sprites/

Adding to the posts above, CSS will only solve your [overState] state using the [hover] style extender.

If you are familiar with jQuery you can set up the proper event handling as follows:

$('#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');
})