Anzeige
Tutorialbeschreibung

Button-Effekte der CSS Variante

Button-Effekte der CSS Variante

In diesem Tutorial erkläre ich euch, wie man die klassischen Link-Effekte (link, visited, hover, active) mit CSS behandelt.


Hierfür brauchen wir keine großen Editoren. Textdateien oder MS Front Page reichen vollkommen aus.

Um jedoch den Überblick zu behalten, werde ich die wichtigsten Sachen in eine Textdatei schreiben… (wenn ihr das Gleiche machen wollt, müsst ihr, wenn ihr die Textdatei speichern wollt, ERST die Textdatei speichern und diese dann noch einmal im „html“–Format speichern, indem ihr hinter euren Dateinamen .html schreibt…).


Bilder


Dann mal los! Und wir starten gleich mit der Frage „WIE ERSTELLE ICH EINEN CSS BUTTON?“
Step 1: Das Nötigste

Als Allererstes erstellen wir uns ein Grundgerüst (wer einen Editor benutzt, braucht diesen Schritt nicht zu machen).

<html>
<header>
</header>

<body>
</body>

</html> 


Wenn wir dies haben, gehen wir dann in den Body-Tag rein und erstellen uns eine Tabelle… (ab hier geht's für alle weiter ^.~ )

<html>
<header>

</header>

<body>


<table border="0" width="110" align="center">
<tr>
<td> ZELLENINHALT </td>
</tr>
</table>


</body>

</html> 

Erläuterung:

- border="0" 0 Keine Umrandung
- "width="110" Breite 110px
- align="center" Die Tabelle wird zentriert (auch möglich: right, left)

Im nächsten Schritt werden wir nun den Code für den Link in die Tabellenzeile eingeben.

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>


Erläuterung:

- a href="#" im # wird wahlweise die Internetadresse (beachtet: nicht www, sondern: http:// etc… dass dies mit angegeben wird!)
- class="menue" das ist eine sog. „Klassifizierung“. Heißt einfach, dass eine „CSS-Gestaltungsklasse“ beigefügt wird
- link 1 das ist nachher der Link-Text, den ihr wählen könnt

Wenn soweit alles gemacht wurde, müsste es nun so bei euch aussehen:


Bilder


Lasst euch nicht davon beirren, dass mein Link lila ist. Wenn er bei euch blau ist, ist das auch korrekt.
Hauptsache, wir sehen Folgendes: Es ist ein Link und nichts ist drum herum! (da die Tabelle keine Umrandungsstärke hat, sieht man sie auch nicht, und da angegeben wurde, dass die Tabelle mittig sein soll, ist der Link auch in der Mitte).

Step 2: CSS

Jetzt geht es ans Eingemachte: Die Gestaltung. Dafür müssen wir wieder zurück in unseren HTML-Code und bearbeiten nun den Header-Tag!

Es kommen nun 5 wichtige Grundsachen dazu:

  1. Der Style Tag
  2. a:link
  3. a:visited
  4. a:hover
  5. a:active

(Das “a:” steht für den Hinweis: Link! Dies finden wir auch im Code “ a href“ wieder. Da wir den CSS Code irgendwo zuteilen müssen, ist es wichtig, darauf zu achten, dass die CSS Informationen dem jeweiligen „Namen“ zugeteilt werden. In diesem Fall: Die CSS (a:) Struktur wird der Art und Weise des „a’s“ (Link) zugeteilt).

<html>
<header>
<style type="text/css">
<!--
a:link { 
} 

a:visited { 
} 

a:hover { 
} 

a:active { 
}
-->

</style>
</header>


<body>

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>


</body>

</html> 

Das ist nun unser CSS–Grundgerüst + Tabelle + Link, die wir nun formatieren werden.
Sieht nun etwas viel aus und kompliziert, aber es ist wirklich ganz einfach. Wichtig ist hier: VERGESST NICHT DIE GESCHWUNGENEN KLAMMERN! Sie müssen jeweils geöffnet und wieder geschlossen werden, ohne wird das alles nicht funktionieren!

Nun werden wir der jeweiligen CSS – Strukturihren Werte zuteilen (Achtung, ich habe nun nur den Header-Teil ausgewählt, heißt also: NICHTS LÖSCHEN!)

<header>
<style type="text/css">
<!--
a:link {
display: block; 
width: 110px; 

text-align: center; 
text-decoration: none; 

font-family: Arial; 
font-size: 12px; 

color: #FFFFFF; 
background-color: #333333; 

border-style: outset; 
border-width: 5px; 
border-color: #000000; } 


Erläuterung:

- display: block; das ist ein einfaches Element zur korrekten Darstellung von Links (ich gehe hier drauf nicht weiter ein… Es ist nur wichtig, dass ihr hier display: block; für die korrekte Darstellung benutzt).
-width: 110px; Breite des Links: 110 Pixel
-text-align: center; der Text wird mittig gestellt
- text-decoration: none; hier gibt es die Möglichkeit, z. B. dafür zu sorgen, den Text durchzustreichen (line-through) oder anderes. Standardsgemäß steht: none; also keine Effekte. Man kann ihn auch weglassen, der Vollständigkeit halber führe ich ihn aber hier auf.
-Fon-family: Arial; Schriftart
-font-size: 12px; Schriftgröße
-color: #FFFFFF; Schriftfarbe
-background-color: #333333; Hintergrundfarbe
-border-style: outset; eine Formatierung für die Tabelle, die dafür sorgt, dass dies leicht 3D-mäßig heraussticht
-border-width: 5px; hier wird festgelegt, dass die Tabellenumrandung 5px beträgt
-border-color: #000000; die Tabellenumrandung ist schwarz

Zu achten ist folgendes: VERGESST NICHT DAS „ ; “ nach euren Werten! Ansonsten wird dies nicht gelesen und es entstehen Fehler.
Die Reihenfolge ist hier egal, nur wegen der Übersicht rate ich euch, Werte, die etwas bestimmen (wie die Schrift etc) zusammenzulegen


Bilder


Nun erkennen wir, wenn wir die Sachen abspeichern und diese in einem Browser anzeigen lassen, wie der Button als Link aussieht... Gar nicht mal schlecht, nicht wahr? Nun fehlen uns nur noch die anderen Werte… Denn wenn wir nun auf den Button klicken, passiert nicht wirklich was Spannendes…

Nun kümmern wir uns um den visited Teil…


a:visited
{
display: block; 
width: 110px; 

font-family: Arial; 
font-size: 12px; 

text-align: center;
text-decoration: line-through;

color: #FF0000; 
background-color: #FFFF00; 
border-style: dotted; 
border-width: 5px; 
border-color: #FFA5000; }

So – hier sehen wir die Angaben dazu, was passiert, wenn man den Link besucht hat. Ich habe die Schrift-Art gelassen, ebenso wie die Größen- und Display-Angaben und habe nur sichtbar die Farben verändert, ebenso die Border-Angaben…

Es müsste dann so aussehen (nein, ihr habt keine 2 Links! Ich habe einfach für den Unterschied die 2 Links untereinander gemacht! Lasst euch nicht beirren ^^ wenn ihr einmal auf euren schwarzen Link klickt, müsste er genauso aussehen wie der erste Button, oder etwas anders).


Bilder


Nun kommt der Hover-Bereich dran. Also jener Bereich, der bestimmt, was passiert, wenn man mit dem Cursor darüber geht.

a:hover
{
display: block; 
width: 110px; 

font-family: Arial; 
font-size: 12px;

text-align: center; 
text-decoration: none;

color: #0000FF; 
background-color: #00FF00; 

border-style: inset; 
border-width: 5px; 
border-color: #DA70D6; } 


Bilder

Auch hier sehr schön durch das Beispiel zu sehen: die Unterschiede, die sich erkennbar machen, wenn man mit dem Cursor über den Button geht.
Kommen wir nun zum letzten Teil: dem Active… heißt also, dem aktiven Button, auf den man geklickt hat.


a:active
{
display: block;
width: 110px;

font-family: Arial;
font-size: 12px;

text-align: center;
text-decoration: none;

color: #00FFFF;
background-color: #000000;

border-style: double;
border-width: 5px;
border-color: #F4A460;
}
-->
</style>
</header>

Bilder

Und so sieht der Link aus, wenn man ihn angeklickt hat. Bestimmt habt ihr einiges an Problemen gehabt, diese Variante überhaupt zu sehen. Wieso? Ganz einfach. Um ihn „aktiv“ zu sehen, muss er einen internen Link besitzen.

Heißt also Folgendes: Wenn ihr auf eurer Seite ein Menü habt, und diese Seite (wie Home, about me, Impressum usw.) interne Buttons integriert hat, erst dann kann man sehen, dass er aktiv ist… Z.B:

<table border="0" width="110" align="center">
<tr>
<td> <a href="http://www.seite.de/home" class="menue">link 1</a> </td>
</tr>
</table>


So würde dieser Link (bzw: der link „home“) im Aktiv-Modus erscheinen.

Nun müsste euer kompletter HTML-Code so aussehen:
 

<html>
<header>
<style type="text/css">
<!--
a:link
{
display: block;
width: 110px;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #FFFFFF;
background-color: #333333;
border-style: outset;
border-width: 5px;
border-color: #000000;
}

a:visited
{
display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: line-through;
color: #FF0000;
background-color: #FFFF00;
border-style: dotted;
border-width: 5px;
border-color: #FFA5000;

a:hover
{
display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #0000FF;
background-color: #00FF00;
border-style: inset;
border-width: 5px;
border-color: #DA70D6;
}


a:active
{

display: block;
width: 110px;
font-family: Arial;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #00FFFF;
background-color: #000000;
border-style: double;
border-width: 5px;
border-color: #F4A460;
} -->
</style>
</header>

<body>

<table border="0" width="110" align="center">
<tr>
<td> <a href="#" class="menue">link 1</a> </td>
</tr>
</table>

</body>


</html> 



Wenn ihr es in dieser Form habt (fern ab von den Zwischenräumen oder nicht :) dann habt ihr es geschafft! Ihr habt einen CSS-gesteuerten Button erstellt!

Was habt ihr gelernt?

- Ihr habt gelernt, aus welchen Funktionen ein Link besteht
- Wie man eine CSS Struktur erstellt
- Wie man durch „Text-Dekoration“ und „Border-Style“ die jeweilige Objekte sichtlich verändert
- Wie man durch diverse Werte einiges hervorheben kann.

Um den Button letzten Endes zu positionieren, könnt ihr mit Tabellen arbeiten und deren Border auf 0 setzen. Dann habt ihr die Möglichkeit, vertikale und horizontale Menüs zu erstellen.

Wenn es noch Unklarheiten geben sollte, könnt ihr mich gerne kontaktieren und fragen.Ansonsten: Viel Spaß beim Herumexperimentieren!

Eure Black_Hat

PS: Es kann vorkommen, dass ihr was eingegeben habt, es aber nicht erscheint...

Z. B.: wenn ihr den Link-Teil macht (also den ersten Part des CSS Codes) und ihr speichert ab und seht dann einen lilanen Link, dann habt keine Panik! Es ist so, dass bei einer Textdatei, wenn ihr sie 1x abspeichert als HTML und ihr somit diese Datei 1x benutzt, sie auch weiterhin als benutzt angegeben wird (also ist dieser benutzte Link nicht mehr im "link"-Bereich, sondern im "select"-Bereich). Um euer Ergebnis dann zu sehen, müsst ihr die Datei irgendwo anders abspeichern, damit der Pfadname ein neuer ist.

Es ist auch ratsam (finde ich), nur Hover, Normal und vielleicht auch noch Select zu machen und Visited nicht. Wenn ein Besucher sich eure Seite anschaut und wieder geht, und nicht reinzufällig C-Cleaner hat, wird auch bei ihm alles beim 2. Besuch als "visited" markiert.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Coca_156
  • 17.11.2011 - 08:46

Ich habe es ausprobiert hat genau so geklappt.

LG
Coca_156

Portrait von Susan99
  • 21.09.2011 - 11:35

Gut erklärt. Vielen dank!

LG Susan

Portrait von artesmaracay
  • 10.11.2010 - 18:57

Prima erklaert, vielen Dank! Bin voellig neu in dem Thema und hat schonmal geholfen.

Portrait von Kronod
  • 23.08.2009 - 18:38

ok, gut beschrieben, aber nicht sehr gut.

-Fon-family: Arial; Schriftart

sollte man evtl. sagen, dass nur Schriftarten verwendet werden sollten, die standard sind, da nicht alle z.B. "Monotype Corsiva" haben. Wenn du auf deiner Webseite das mal anwendest, sieht es bei jemandem, der nicht die Schriftarten hat, nicht sooo toll aus. Desweiteren hast du "Fon" und nicht "Font" geschrieben.

Du hast geschrieben.
1 -border-style: outset; eine Formatierung für die Tabelle, die dafür sorgt, dass dies leicht 3D-mäßig heraussticht
=> du erstellst das CCS für den Link und nicht für die Tabelle.
2 -border-width: 5px; hier wird festgelegt, dass die Tabellenumrandung 5px beträgt
=> hier dasselbse
3 -border-color: #000000; die Tabellenumrandung ist schwarz
=> und nochmal

weiterhin bleibt wohl festzuhalten, das die Rechtschreibprüfung nicht optimal war. Gruß Kronod

Portrait von katzenpup
  • 21.08.2009 - 10:45

Sehr gut formuliert und die Erläuterungen sind eingängig. Leider ist das PDF-Doc in den Quelltextabschnitten völlig unübersichtlich geraten. Zum Lesen nicht besonders geeignet.

Portrait von robtom
  • 20.08.2009 - 11:58

sehr gut und einfach erklärt

Portrait von werk2
  • 20.08.2009 - 11:05

sehr hilfreich, werde ich gleich mal ausprobieren

Portrait von Freistoss
  • 20.08.2009 - 12:04

Danke!

Nicht ganz, was ich gesucht habe, aber gut erklärt!

x
×
×