Galerie

Mit Profitipps Webseiten gestalten - Schön einfach: So nutzen Sie Standard-Button-Elemente für Links.

Schön einfach: So nutzen Sie Standard-Button-Elemente für Links.

Tipp 1: Einfache Link-Buttons

So erzeugen Sie einfache und verlinkbare Button-Elemente.

Wenn Sie in Ihren Seiten-Quelltexten einen klickbaren Link benötigen, stellt sich die Frage, wie Sie den Link optisch darstellen. Sind Sie dann auch noch an ein bestimmtes Layout gebunden, sind oftmals komplexe Formatierungen für eine angemessene Darstellung von Buttons oder Schaltflächen nötig. Zwar können Ihnen hierbei die vielseitigen CSS-Formatierungen helfen, oftmals genügt es aber auch, eine einfache Standard-Schaltfläche für den Benutzer darzustellen.

Diese Schaltflächen ist man von den Windows-Anwendungen her gewohnt und diese passen sich in der Regel auch in alle Layouts optimal ein. Hier gilt es nun, mit einem verblüffend einfachen Kniff die in der Regel nötige JavaScript-Funktionalität über ein OnClick-Ereignis zu umgehen. Immer mehr Anwender sperren nämlich bewusst und aus gutem Grund das Java-Scripting auf Ihren PC-Systemen. Aus diesem Grund können solche Anweisungen dann auch nicht mehr ausgeführt werden.

In unserem Fall benutzen Sie das Standard HTML-Objekt <button> in einem anderen Kontext. Es wird einfach in ein HTML-Linkobjekt eingebettet und somit komplett als aktiver Link genutzt. Sie müssen dem Button-Element nur noch das Attribut type="button" und einen Beschriftungstext im Attribut value="Text" mitgeben. Das sieht nun wie folgt aus:

<a href="pfadangabe.html"><button type="button"
value="Alle anzeigen">Alle anzeigen</button></a></b>

Der Browser interpretiert das Button-Element als klickbare Grafik und verzichtet auf komplexe Formatierungen. Mit einfachsten Mitteln entstehen so anspruchsvolle und vor allem bekannte Buttons in Ihren HTML-Seiten.

Die beliebtesten Bildergalerien
Youtube-Gema-Sperre umgehen
Galerie
Videos freischalten
Solange YouTube und die GEMA sich streiten, schauen deutsche Musikfreunde in die Röhre. Mit den Tipps in der Galerie lässt sich die YouTube-Sperre…
Beste WLAN-Router
Galerie
Top 5
WLAN-Router dienen als Zentrale für Internet und WLAN. Wir zeigen Ihnen die fünf Geräte, die im Test am besten abgeschnitten haben.
Microsoft hat eine neue Windows-10-Preview als ISO-Download veröffentlicht.
Galerie
God Mode, Virtual Desktops , Startmenü & Co.
Wir verraten 20 Tipps und Tricks für Windows 10: Damit haben Sie das neue Microsoft-Betriebssystem zum Release direkt im Griff.
Weitere Bildergalerien entdecken
Einen chronologischen Überblick über alle bisherigen Bildergalerien finden Sie in unserem Archiv-Bereich. Entdecken Sie unsere faszinierende Bilder!