Button

Website selber erstellen - Tools, Widgets, Zubehör

ein Projekt von selber-machen-homepage.de

Button für die Webseite einsetzen

 

Wer seine Webseite selber programmiert oder einen Provider mit einem vernünftigen Homepagebaukasten gefunden hat, möchte vielleicht doch irgendwann Button einsetzen, statt der üblichen einfachen Textlinks. Das gilt sowohl für das Menü als auch für Einzelfälle in denen der Besucher per Klick bestimmte Aktionen starten soll.

 

grundsätzlicher Vorteil:

  • Button sind optisch ansprechender

 

Dabei muss man vor allem einmal definieren was ein Button ist. Ein Button ist genau betrachtet, jedes Element, bei dem man per Klick eine Reaktion auf der Webseite auslöst.

Die alte Vorstellung, dass ein Button eine Grafik/Bild ist entstammt den Anfängen des Internet.

Die Standardform sieht wohl ungefähr so aus:

Ob bunt, viereckig oder runde Ecken, mit 3D-Effekt oder Schatten, alles ist grundsätzlich möglich. Solche Button mit einem Grafikprogramm wieder extra herzustellen ist, wenn man dann anfängt detailversessen zu werden, ziemlich aufwendig und bringt nicht wirklich Nutzen. Es zeigt zwar, das jemand mit Liebe und Ehrgeiz am Werk war, aber das wars dann auch schon..

 

Die Anwendung grafischer Button im Menue bringt einige Nachteile mit sich:

 

  • Jeder Button muss einzeln erzeugt werden, möchte man einen Maus-Over-Effekt erreichen, müssen sogar zwei Button erstellt werden. (Je nach Variante der Navigation u.U. pro Eintrag)
  • Für jeden Button, der ja als Grafik geladen wird, ist ein HTTP-Request nötig, der die Ladezeit der Website erhöht.
  • Möchte man irgendwann am Design etwas ändern, sind die Button meist nicht mehr passend und man kann die ganze Arbeit noch einmal machen.
  • die Button müssen von der Größe genau passen, sonst kann man von vorne anfangen

 

Dabei hat man grundsätzlich die Wahl zwischen beschrifteten Button, das heißt für jeden Menüpunkt ein oder zwei extra Button erstellen, oder alternativ einen leeren Button als Hintergund für die Menüeinträge, Das könnte zum Beispiel so aussehen:

<table style="background:#888">

<tr>

<td style="background-image:url(http://selber-machen-homepage.de/widgets/buttonleer.gif);

background-repeat:no-repeat;

background-position:center center;

width:180px; height:40px;

text-align:center; padding:5px;

" >Testbutton1

</td>

</tr>

<tr>

<td style="background-image:url(http://selber-machen-homepage.de/widgets/buttonleer.gif);

background-repeat:no-repeat;

background-position:center center;

width:180px; height:40px;

text-align:center; padding:5px;

" >Testbutton2

</td>

</tr>

</table>

 

Hier als Beispiel eine Tabelle mit einer Zeile und einem leeren Button als Hintergund. Wenn man die Höhe für die Tabelle mit <table width="160px;" und die Zeilen mit <tr height="38px"> setzt und diese Werte mit der Grafikgröße übereinstimmen, kann man sogar die Background-Angaben sparen. Alternativ und besser kann man auch, da die obigen style-Anweisungen ja für jede Zelle zu machen wären, diese sinnvoll als CSS-class definieren. Trotzdem ist es immer eine kleine Kunst das mit der Beschriftung in Einklang zu bringen. Da ist es schon fast einfacher Einzelbutton als <img> in der Tabelle abzulegen.

Mit CSS würde es so aussehen:

 

<style type="text/css">

.menue {width:180px; margin:10px;text-align:center;height:40px;padding:5px;

background:url(http://selber-machen-homepage.de/widgets/buttonleer.gif) center center no-repeat;

}

</style>

<table style="background:#888">

<tr>

<td class="menue">Testbutton1

</td>

</tr>

<tr>

<td class="menue">Testbutton2

</td>

</tr>

</table>

 

Den Teil mit <tr></tr> bräuchte man nur noch mit einem Link versehen, vervielfältigen und anpassen. Und schon wäre ein einfaches Menü fertig.

Der Vorteil: man braucht im Fall des Falles nur den Button ändern und bei Bedarf im CSS-Code etwas nachbessern und schon sieht alles anders aus.

 

Wer normale Einzel-Button einsetzen möchte, findet im Netz jede Menge Vorlagen, die man bei Bedarf dann nur noch in einem beliebigen Bildbearbeitungsprogramm beschriften muss. Zum Beispiel:

 

 

Zu beachten ist: Die Button sind, egal wie sie optisch wirken, regulär immer rechteckig und mit einem einfarbigen Hintergrund versehen (meist weiß). (Rechtsklick - Grafik anzeigen) Man benötigt also einen gleichfarbigen Hintergrund, oder muss es mit einem passenden Grafikprogramm bearbeiten.

 

Online-Buttongeneratoren gibt es natürlich auch:

 

www.buttongenerator.com

 

Aber Button sind ja nicht nur Menüelemente und haben nicht nur die Standardform. In beiden Fällen, kann man selbst mit einfachen Möglichkeiten, gute Effekte erzielen.

Wie man solche Button oder Elemente ganz einfach mit Word erstellen kann oder einfache Button mit CSS, erfährst du hier:

Copyright © All Rights Reserved