Bouton a 1, 2,3 ou 4 états

Bonjour j'ai mixé plusieurs technique afin de pouvoir créer simplement des boutons qui changent selon différents états.
La solution semble attirante (à mes yeux) cependant elle souffre d'une limitation, lorsque l'utilisateur change la taille de la typo ils éclatent.
Je la poste tout de même ici, peut-être que quelqu'un trouvera une solution ou que ça lui donnera une nouvelle idée.
démo : http://bleuebuzz.fr/tests_css/img_replace/links.html
css :

/*------------------------------------------------------------------ 
	[Button]
-------------------------------------------------------------------*/
	.button {	
		/*	Input & button	*/
		vertical-align: middle;
		border: none;
		padding: 0;
		/*	Common	*/
		display: -moz-inline-stack;
		display: inline-block;
		height: 0;
		padding-top: 1em;
		overflow: hidden;
		white-space: nowrap;
	}
	.button, x:-moz-any-link {
		height: 1em;
	}
	input.button,
	button.button {
		height: 1em;
	}
	.button, x:-moz-any-link, x:default {
		height: 0;
	}
/*------------------------------------------------------------------ 
	[Button > two states]
-------------------------------------------------------------------*/
.two-states:hover,
.two-states:active,
.two-states:focus {
	background-position: 0 -1em;
	outline: none;
}
/*------------------------------------------------------------------ 
	[Button > three states]
-------------------------------------------------------------------*/
.three-states:hover {
	background-position: 0 -1em
}
.three-states:active,
.three-states:focus {
	background-position: 0 -2em
}
/*------------------------------------------------------------------ 
	[Button > for states]
-------------------------------------------------------------------*/
.four-states:hover {
	background-position: 0 -1em
}
.four-states:active {
	background-position: 0 -2em
}
.four-states:focus {
	background-position: 0 -3em
}

/*------------------------------------------------------------------ 
	[Button > exemple]
-------------------------------------------------------------------*/
.button {
	background-image: url(../img/btn-one-state.png);
	width: 120px;
	font-size: 20px;
}
.two-states {
	background-image: url(../img/btn-two-states.png);
	width: 120px;
	font-size: 20px;
}
.three-states {
	background-image: url(../img/btn-three-states.png);
	width: 120px;
	font-size: 20px;
}
.four-states {
	background-image: url(../img/btn-four-states.png);
	width: 120px;
	font-size: 20px;
}