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

HTML Button mit CSS

  • Ersteller Ersteller pallino
  • Erstellt am Erstellt am
P

pallino

Guest
Hallo,
ich möchte gerne einen Submit-Button, der beim darüber fahren mit der Maus (rollover) seine Design ändert, erstellen.

Button Normal:
HTML: 
<html>
<style>
.button {
background-color:#E0EEEE;
border:1px;
border-color:#000000;
border-style:solid;
}
</style>
<input type="submit" class="button" value="Senden">
</html>



Beim darüber fahren mit der Maus (rollover):
HTML: 
<html>
<style>
.button {
background-color:#ff00ff;
border:1px;
border-color:#00ff00;
border-style:solid;
}
</style>
<input type="submit" class="button" value="Senden">
</html>

Ich weiß dass ich beim zweiten Code den Wert ".button" anpassen muss, aber ich weiß nicht wie?
Könnt ihr mir helfen?
Danke.
 
@Cheffchen
So hätte ich es auch gemacht. Bei mir funktioniert es aber nicht im Internet Explorer. (Nur wenn man <!DOCTYPE html> noch oben einfügt.)

Also sieht es bei mir so aus:

HTML: 
<!DOCTYPE html>
<html>
<style>
.button {
background-color:#E0EEEE;
border:1px;
border-color:#000000;
border-style:solid;
cursor:pointer;
}
.button:hover {
background-color:#ff00ff;
border:1px;
border-color:#00ff00;
border-style:solid;
}
</style>
<input type="submit" class="button" value="Senden">
</html>
 
Hallo,

ah, anderer Name?

Na wenn die hälfte vergisst ist das klar.
HTML5 macht vielles leichter aber der grund soll schon stimmen :O).

HTML: 
<!DOCTYPE HTML>
<html>
<head>
<style>
.button {
background-color:#E0EEEE;
border:1px;
border-color:#000000;
border-style:solid;
cursor:pointer;
}
.button:hover {
background-color:#ff00ff;
border:1px;
border-color:#00ff00;
border-style:solid;
}
</style>
</head>
<body>
<input type="submit" class="button" value="Senden">
</body>
</html>

Cheffchen

ps: class button ist grundsätzlich nicht schön da es den style button vom system her schon gibt.
 
@Cheffchen

Nö, andere Person. :)

Ich hätte dafür auch nicht 'class' verwendet, aber ich habe es einfach mal übernommen.


Grüße
Programmier-Felix

PS: Bei dem Code war ich wohl bisschen schlampig :)
 
Hallo,
vielen Dank. Das mit dem <!DOCTYPE HTML> war der entscheidende Hinweis! Ich hatte das nämlich vergessen :D
Was würdet ihr anstatt 'class' verwenden?
Danke.
 
Cheffchen schrieb:
ps: class button ist grundsätzlich nicht schön da es den style button vom system her schon gibt.
Zum Vergrößern anklicken....


Ich seh gerade ich habe falsche geantwortet bzw. es falsch gedacht. Ich glaub man kann doch 'class' verwenden, aber es ist nicht so schön zusagen: 'class="button"'
Cheffchen sagte, dass man es verwenden kann, aber es nicht so schön ist, da es die Styleangabe schon vom Sytem aus gibt. Es könnte also evtl. zu Fehlern führen.
Nimm zum Beispiel: 'class="knopf"' oder 'class="eigenerbutton"'

So habe ich es verstanden.
 
Wie muss man es eigentlich richtig schreiben?

1. <!DOCTYPE HTML>

oder

2. <!DOCTYPE html>

oder

3. <!doctype HTML>

oder

4. <!doctype html>



Gibt es bestimmte Regeln, die man beachten muss oder ist das egal? Also muss man, wenn man sonst Angaben wie <html> oder <body> auch klein schreibt auch <!doctype html> klein schreiben,oder wenn man <HTML> oder <BODY> immer groß schreibt auch <!DOCTYPE HTML> entsprechend groß schreiben?
Vielen Dank!
 
pallino schrieb:
Wie muss man es eigentlich richtig schreiben?

1. <!DOCTYPE HTML>

oder

2. <!DOCTYPE html>

oder

3. <!doctype HTML>

oder

4. <!doctype html>



Gibt es bestimmte Regeln, die man beachten muss oder ist das egal? Also muss man, wenn man sonst Angaben wie <html> oder <body> auch klein schreibt auch <!doctype html> klein schreiben,oder wenn man <HTML> oder <BODY> immer groß schreibt auch <!DOCTYPE HTML> entsprechend groß schreiben?
Vielen Dank!
Zum Vergrößern anklicken....

Hier ist die Antwort direkt vom W3C.

The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax
Zum Vergrößern anklicken....

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben