• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Buttons in HTML Seite einbinden

G

Gugi

Neues Mitglied
Hallo,

Wie kann man CSS-Buttons in eine HTML-Seite einbinden?
Der Inhalt der button.css:
Code: 
div.button { width:286px;
               text-align:center;
               cursor:pointer;
               font-size:14,25pt;
               font-family:'Microsoft Sans Serif';
               text-decoration:none;
               font-style:normal;
               font-weight:bold;
               color:Black;
               height:76px;
               margin:2px;
               padding:2px;
               background-repeat:no-repeat;
               background-image:url(default.png);
}

div.button:hover { background-image:url(over.png);
}

div.button:active { background-image:url(down.png);
}
Sry, falls man das irgendwie anders nennt als CSS-Buttons oder das total einfach ist, ich bin in HTML und CSS noch anfänger... :mrgreen:

Gruß, Gugi
 
Willkommen erstmal im html Forum!

Ich rate es dir nicht über einen div zu machen. Semantisch gesehen sollte man so gut wie es geht auf divs verzichten, aber egal. Wenn du dich länger mit html beschäftigst wirst du mit der Zeit alleine darauf kommen.

Also den CSS Code den du da oben hast musst du halt in das html Dokument einbinden. Das geht mit: <link type="text/css" rel="stylsheet" href="name_der_css_datein.css" /> <-Das muss im Kopf bereich des HTML Dokuments stehen.

Im Körper, oder auch body Bereich genannt, kommt dann dein div rein.

also:
HTML: 
<html>
<head>
<title>Button</title>
<link type="text/css" rel="stylsheet" href="name_der_css_datein.css" /> 
</head>
<body>
 
<div class="button"><!--Hier wäre noch Platz für Inhalt, zB kannst du da auch einen Link reinsetzen, text oder was auch immer</div>
 
</body>
</html>

und so funzt das in der CSS auch:

PHP: 
.button {   width:286px;
               text-align:center;
               cursor:pointer;
               font-size:14,25pt;
               font-family:'Microsoft Sans Serif';
               text-decoration:none;
               font-style:normal;
               font-weight:bold;
               color:Black;
               height:76px;
               margin:2px;
               padding:2px;
               background-repeat:no-repeat;
               background-image:url(default.png);
}
 
.button:hover { background-image:url(over.png);
}
 
.button:active { background-image:url(down.png);
}

Da du dem div die class button gibst, kannst du den div vor .button einfach weglassen.
 
Willkommen erstmal im html Forum!
Zum Vergrößern anklicken....
Danke ;)
Jetzt ist der Button schonmal in der .html Seite, aber wenn man auf den button klickt oder mit der maus rauffährt verändert sich das bild nicht...
die .html datei:
HTML: 
<html>
<head>
<title>Button</title>
<link type="text/css" rel="stylesheet" href="button.css" /> 
</head>
<body>
 
<div class="button"><br />Test</div>
 
</body>
</html>
und die button.css :
PHP: 
.button {   width:286px;
               text-align:center;
               cursor:pointer;
               font-size:14,25pt;
               font-family:'Microsoft Sans Serif';
               text-decoration:none;
               font-style:normal;
               font-weight:bold;
               color:Black;
               height:76px;
               margin:2px;
               padding:2px;
               background-repeat:no-repeat;
               background-image:url(default.png);
}
 
.button:hover { background-image:url(over.png);
}
 
.button:active { background-image:url(down.png);
}

Gruß, Gugi
 
Ups ganz übersehen.

der Url von Bildern wird so angegeben:

background: url('default.png');

Also bei url nicht auf die SIngle Quotes vergessen.

background-image und background-color ist übrigens unnötig.

Wenn du eine Hintergrundfarbe willst, erreichst du das mit: background: #00000;
Bei Hintergrundbilder erreichst du es auch ganz gleich mit background: url('bild.jpg');

Sparst dir tipparbeit ;)

Und verwende lieber .jpg als .png, da png nur von wenigen IE Versionen unterstüzt wird.
 
ich kapir´s nicht mehr :( .
jetzt sieht die button.css so aus:
PHP: 
.button {   width:286px;
               text-align:center;
               cursor:pointer;
               font-size:14,25pt;
               font-family:'Microsoft Sans Serif';
               text-decoration:none;
               font-style:normal;
               font-weight:bold;
               height:76px;
               margin:2px;
               padding:2px;
               background-repeat:no-repeat;
               background: url('default.png');
}
 
.button:hover { background: url('over.png');
}
 
.button:active { background: url('down.png');
}
aber es ist immernoch kein mouseover und click-bild?

Gruß, Gugi
 
Hm ja entweder falscher Pfad für die Bilder angegeben, oder aber (was wahrscheinlicher ist) das der Selektor nicht greift.

mach vor .button doch den div noch mal hinzu.

Wenn das auch net geht änderst du deine HTML Struktur.

Der Div geht weg, stattdessen machst dus mit einem <ul> Menü. Aber dazu später.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben