Here is my existing code snippet:
CSS:
.submitorder {
background-image: url('https://www.amleo.com/images/art/PON1.jpg');
width: 205px;
height: 52px;
font-size:0px;
}
.submitorder:hover {
background-image: url('https://www.amleo.com/images/art/PON2.jpg');
width: 205px;
height: 52px;
font-size:0px;
}
The HTML code used is simply:
<div><input type="submit" class="submitorder"/></div>
This code is implemented on the following page:
I am considering combining the two images into one. Any suggestions on how I could transition what the user sees to the bottom half of the image when hovering over it?
Your feedback on the design aspects would be greatly appreciated.
Thanks in advance for your input!