Three-state button help

I have a three-state button that has a raised, shadowed effect when normal or hovered, but gives a pressed effect when clicked. The button image uses three nearly identical images, the top for normal, the middle for hover, and the bottom for pressed:

The button works like it should when you open it in a web browser, but the problem is, when you use the zoom feature for web browers (Ctrl + mouse scroll), it doesn’t function the same way. For example, when you hover over the image, it shifts somewhat. And when you click and hold, other sections of the image can be slightly seen (it’s very sutble I know). But I want the button to work so that no matter which zoom is used, it has the same effect as the normal zoom. Here’s the code I used:


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
		<title>Button Test</title>
		<style type="text/css">
			body {
				padding: 40px;
			}
			.button a {
				outline: none;
				display: block;
				width: 53px;
				height: 27px;
				background: url(button.png) no-repeat top;
			}
			.button a:hover {
				background-position: center;
			}
			.button a:active {
				background-position: bottom;
			}
		</style>
	</head>
	
<body>


<div class="button">
    <a href="#"></a>
</div>

Any ideas? Thanks.

As the screen zooms, perhaps the pixel calculations shift a bit. You could try reducing the button dimensions a pixel or so in each direction and thus hide a 1px edge around the image, which would show in these circumstances. Worth a try, anyhow.