Sobald Bildschirm kleiner, rutschen Button ca. 1/3 übereinander

Was meinst du mit "ca. 1/3 übereinander" - dass sich die Buttons überlappen?

Ich nehme an, der CSS-Code bezieht sich auf einen einzelnen Button? damit alleine lässt sich ein Überlappen nicht erklären. Kannst du vielleicht eine Demo-Seite verlinken? oder soviel HTML- und CSS-Code posten, dass sich das Problem damit nachstellen lässt.

Hinter den Buttons stecken <span>, also Inline-Elemente; diese verhalten sich beim weichen Umbruch anders als Blockelemente.

Probier's mal mit inline-block:

.xnormal, .xcurrent {
    display: inline-block;
    width: auto;
    /* .... */
}

Die margin und padding Werte müsstest du dann auch noch anpassen...