Hi Sven,
danke für Deine Antwort. Hier meine Meinungen dazu.
Die _optische_ Anordnung der Buttons muß doch mit der _syntaktischen_ Anordnung im Quelltext nichts zu tun haben. position:absolute und position:relative funktionieren.
Okay, noch ein Hinweis, der das dann wiederum unmöglich macht: Das ganze wird auf Seiten benötigt, die per CMS gepflegt werden. Wir wissen nicht, wie viel Text dazwischen kommt, und wann das Formular geschlossen wird, um eine Positionierung über position/top/left/etc. sauber zu realisieren.
Abgesehen davon halte ich es für ausgeschlossen, mit heutigen Browsern die beiden Elemente wirklich absolut identisch zu formatieren.
Schau Dir das Beispiel mal an. Sieht auf den aktuellen Browsern für Windows sauber aus, Linux und Mac teste ich heute abend noch nach, denke aber es passt dort auch... We'll see :-)
Alleine schon <button> ist ein Element, welches man dank des IE eigentlich meiden sollte.
Gründe?
Und ansonsten ist einfach zu befürchten, dass Browser die Buttons mindestens teilweise mit den Mitteln des genutzten Betriebssystems darstellen, von denen einige das Aussehen des Buttons so beeinflussen, dass das mit CSS nicht nachstellbar ist.
Tun sie solange, wie du keine Angaben zu Border/Background etc. machst, ja. background: transparent; border: none; hebelt das aber aus und das Padding Problem im IE wird durch das display: block; und der festen Breitenangabe eliminiert (Nachteil: Breite ist nicht an den Text angepasst, aber kann ich drauf verzichten ;-)).
Aus diesem Grund halte ich es für den einfacheren Weg, Dinge, die identisch aussehen sollen, auch identisch herzustellen.
Die Alternative für den <button></button> und <a></a> wäre <input type="image"> und <a><img/></a>.
Interesssant für eine schnelle Lösung (quick & dirty), für mich aber keine wirkliche Alternative (auch nicht prof.), da wir den Markup für verschiedene Bereiche nutzen die unterschiedliche Farben benötigen. Dementsprechend ist es sauberer die Buttons über CSS zu formatieren und nein ich möchte nicht jedem Button eine ID geben. ;-)
Die Suche geht weiter :-)