Web design: Buttons have slight "shifting" text on mouseover

Hello!

I've got some text buttons with only a color-change on mouseover that appear to have the text shifting slightly when you mouseover the buttons so that the text appears almost "blurry."

These buttons are sitting on top of an image that is "stretchy" to fit the window width.

The exact same buttons used elsewhere on the site do not appear to "shift" at all upon mouseover, but simply change color like they are supposed to.

I have two different websites using a similar design with the buttons on top of a "stretchy" image that are both displaying the same text shifting/blur problem. My theory is that the code output from Xara that is making the image "stretch" is somehow also affecting the buttons sitting on top of it.

Is this slight shift/text blur something I can fix in Xara?

Here's a link to the websites with the buttons:

https://www.igcshow.com/index.htm

http://www.igcmagazine.net/TESTSITES/gca_21/index.htm

Software: Xara Designer Pro X, Windows 10.

Thank you for any suggestions!
-Kelly

My guess is you have applied soft groups (text and rectangle) on the MouseOff and MouseOver layers, soft-grouped the two soft groups together and made the button sticky? If true and the text on the button is anything other than left-justified, you will see a distortion that shifts the text on one layer (usually to the right) which causes a blur.

Simple workaround is group rather than soft group text and rectangle on each layer, soft group both layers and the problem does not occur; it is I believe a known gremlin! You will have to live with the fact that text then becomes a bitmap when exported as opposed to staying as text.

I could of course be wrong, but that has been my experience of the issue and worth a try?

I don't have separate text/rectangles for the buttons - just a text box with a colored background, and the buttons are not sticky. I do have the text horizontally and vertically centered in the text box, however.

Your response gives me a place to start to try to troubleshoot my issue by separating the text and the colored rectangle and/or removing the horizontal centering. Thank you very much!

-Kelly

Yeah, text (set to center justify) centered and grouped to the button shape. The button shape can be the same color as the page if you want it to appear to be text only.

Then as suggested, with both buttons on separate layers, and both visible, select both and Arrange > Soft Group.