HTML Link wie formularbutton

[Marco-P]

Hallo Leute,

ich will das ein normaler HTML text Link wie ein button in einem Formular aussieht.
Also ich bin mir ganz sicher das so etwas geht. Aber ich habe keinen blassen dunst wie.
Vielleicht hat das ja jemand schon gelöst und kann mir helfen.

MFG Marco

 

[Maik]

Hi,

dies wäre eine Möglichkeit:

a.button {
display:block;
border:1px outset #000;
background:#ccc;
width:100px;
line-height:20px;
text-decoration:none;
text-align:center;
color:#000;
}

<a href="#" class="button">Link</a>

 

[Marco-P]

Ja das ist schonmal ein ganz guter anfang aber ich hätte es gerne genau so.
Das man keinen unterschied mehr erkennt.

Aber vielleihct kann ich dein skript ja als grundlage verwenden und einfach mal probieren

Danke ersteinmal

 

[Maik]

Von welchem Unterschied sprichst du?

Möglicherweise meinst du ja diesen Zusatz hier, wenn der Link geklickt wird:

a.button:active {
border:1px inset #000;
width:96px;
padding-left:4px;
}

Ansonsten schau dir mal in dem Artikel Styled submit buttons die Übersicht an, wie unterschiedlich der Formularbutton in den Browsern auf den einzelnen Betriebssystemen dargestellt wird.

 

[Marco-P]

na er soll genauso aussehen wie der formularbutton in dem angehängten bilb.
Auch beim drüber fahren und beim drücken.

 

[Maik]

Dann erzeugst du dir besser im Grafikprogramm deines Vertrauens drei entsprechende Grafiken und bindest sie über die Pseudoklassen als Hintergrundbild ein, um in allen Browsern die gleiche Darstellung zu erzielen.

 

[cr4shm4n]

Ja das ist schonmal ein ganz guter anfang aber ich hätte es gerne genau so.
Das man keinen unterschied mehr erkennt.

Hi,
Wenn du willst, dass es wirklich gar keinen Unterschied mehr gibt, müsstest du nicht das Aussehen der Links ändern, sondern die Funktion der Buttons.
Dabei hast du 2 Möglichkeiten:

• javascript: Du erstellst Buttons mit Beschriftung, die zunächst nichts weiter bewirken, und dann setzt du wahlweise die onclick-Attribute oder du benutzt eventListener. Der Nachteil dieser Methode ist offensichtlich: Hier wird Javascript benutzt, wo es eigentlich nicht hingehört und außerdem hat ja bekanntlich so mancher User Javascript einfach ausgeschaltet.
• Formulare: Jeder deiner Links sieht dann so aus:

<form action="http://example.org"><input type="submit" value="Link" /></form>

Diese Lösung sollte zwar Überall funktionieren, verschwendet aber unglaublich viel Traffic und ist überhaupt ein Missbrauch von Formularen.Fazit: Eine Wirklich befriedigende Lösung lässt sich so nicht erreichen.

Aber es gibt noch eine andere Möglichkeit, die ich Persönlich bevorzugen würde:
Nicht die Links sehen wie die Standard-Buttons aus, sondern die Standard-Buttons wie irgendwelche Buttons, die du dir selber ausdenkst. Dann kannst du die Links nämlich per CSS so formatieren, dass sie genauso aussehen.

 

[Marco-P]

Ok

also das mit java ist mir auch nichts.

Das liebste wäre mir halt echt die Links so aussehen zu lassen wie meine buttons und das per css so umzusetzen.

 

[Maik]

Wie gesagt, du kommst da nicht um den Einsatz von drei entsprechenden Grafiken herum, um den Button, der dem Anschein nach aus dem Firefox stammt, mit abgerundeten Ecken und den drei Button-Zuständen



zu imitieren.

Diese kannst du dann ganz bequem mit CSS als Hintergrundbilder einsetzen.