HTML Forumular Element mit mehr als zwei Zuständen

Hallo,

ich benötige für eine Idee, die ich realisiere, mehrere HTML Elemente in Form eines Buttons mit folgenden Eigenschaften je Button:

1. Mehr als zwei Zustände
2. Soll aussehen wie ein Button
3. Beim Anklicken des Buttons soll der nächste Zustand gewechselt werden

Wenn man die Zustände wechselt und danach irgendwo auf speichern klickt, dann sollen die Zustände in eine Datenbank geschrieben werden.

Gibt es so etwas überhaupt nur in HTML/PHP?

Könnte ich sonst alternativ besser Buttons erstellen, die beim Anklicken den Zustand in einem Array via JavaScript/jQuery ändert und beim Abschicken des Formulars den Inhalt des Arrays in die Datenbank schreiben?

Freue mich auf Eure Vorschläge :-)

sowas: http://codepen.io/rhofma/pen/YGZoZg

hab eine kleine vue.js componente geschrieben.. ein button mit 3 zuständen.. wobei der button eine div ist