Change Image onClick and onRelease? - html

Question

Is there a possibility to change the buttons image to button_pressed.png while the button is pressed and change it back to button_unpressed.png when the button is released again?
EDIT
I have the following HTML:
<header id="toolbar">
<div id="toolbar_back">
<form action="#/">
<input type="image" />
</form>
</div>
<h1 id="toolbar_title">Photo Prints</h1>
</header>
And the following CSS:
#toolbar {
background: #FFFFFF;
height: 60px;
width: 100%;
margin: 0;
padding: 0;
box-shadow: 0px 2px 1px #888888;
display: table;
}
#toolbar_title {
color: black;
font-size: 30px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#toolbar_back {
padding-left: 10px;
display: table-cell;
vertical-align: middle;
}
#toolbar_back input {
background: url("../img/toolbar/toolbar_back.png");
}
#toolbar_back input:active {
background: url("../img/toolbar/toolbar_back_pressed.png");
}
But with this the result is the following:
I just want the background images to be shown and i want them to be fully shown.

Answer 1

You'd want to make the button a background image:
#button input {
background-image: url("img/button_unpressed.png");
background-size: cover; /* or 'contain' */
background-repeat: no-repeat;
}
#button input:active,
#button input:focus {
background-image: url("img/button_pressed.png");
}
You'll probably also need to remove border and other styles to only show your background image.