That's no good.
Start with one side, like this. The border on each side needs to be exactly the same, or the image will appear to move. Once you have it centered, you need to double the width. When finished, the border in between the two states should be double the border on the edges, because half the center border will be used for each state.
Also, the width needs to be an even number, because only half gets used at one time. If it's an odd width, it'll move when changing states. But, if you start with one side, as I suggest, than double the width, then the width can never be an odd amount.
Here's an example from my Aqua screen, which may show you what you need to do more clearly. Notice the width of the center.
If you're going to do a glow like that, here's what I do.
Start with the button width. Say it's 75 pixels. Say the glow needs another 6 pixels at each side. 75+12 = 87 pixels wide for each state, x2. so the image width would be 174 pixels. The two buttons should each be 6 pixels from the edge, with 12 pixels in between them. 6+75+12+75+6 = 174
Make sense?