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

(submit) buttons als Grafik oder Farbverlauf per CSS

Status
Für weitere Antworten geschlossen.
T

Thai16

Neues Mitglied
Ich möchte gerne buttons, die anders aus schaun als die stinknormalen, also z.B. ne Grafik als Submitbutton, am besten mit CSS,
kann mir da wer sagen wie das geht?
 
das hat dann aber nichts mit css zu tun. da musste grafiken erstellen und die als links setzen.

Nils aka XraYSoLo
 
Hier noch ein kleines Beispiel mit CSS:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Grafikbutton</title>
		<style type="text/css">
		<!--
			.grafikbutton
			{
				height:25px;
				background-image:url('grafiken/grafikbutton_1.png');
				background-repeat:repeat-x;
			}
			
			.grafikbutton:focus
			{
				height:25px;
				background-image:url('grafiken/grafikbutton_2.png');
				background-repeat:repeat-x;
			}
		-->
		</style>
	</head>
	<body>
		<input class="grafikbutton" type="button" value="Das ist ein Grafikbutton" />
	</body>
</html>

» http://verhueterli.ve.funpic.de/index/hilfe_manuell/grafikbutton.html
 
dementia, es geht ja auch nur um den prinzipiellen Aufbau von grafischen Buttons mittels CSS - das focus ist da ja mehr ein Showeffekt.
 
Ich meine nicht nur den focus sondern generell sieht man dort bei den meisten Browsern den Standartbutton.

mfg
 
dementia, ich habe mal einen Screen von der Seite in Firefox, Opera und Internet Explorer gemacht (Screens sind auch in der Anordnung von oben nach unten):

EC6hzmQi.png
 
Ich auch.

screen_ie.GIF

screen_op.GIF


Vllt liegts auch an irgendwelchen Einstellungen, keine Ahnung.
Es hilft aber auch nichts darüber zu diskutieren.

mfg
 
Naja generell geb ich aber Verhueterli recht, das fast alle Browser CSS Styles fürn nen Button richtig umsetzen...

(Hab eigentlich noch keinen gesehen der se nicht umsetzt, außer evtl richtig alte Browser)

Also kann mans schon getrost einsetzten.

mfG
 
Wenn man den Button so erstellt muss man ja den Typ "image" angeben doch was ist wenn man diesen Button als Submit-Button verwenden will?
 
Also,

Ein normaler Button

<input type="button" />
oder
<button type="button"></button>

ein Submitbutton

<input type="submit" />
oder
<button type="submit"></button>
 
Du hast wohl nicht richtig gelesen Psyko. Wenn man ein Bild für dne Button verwenden will muss der Typ "image" sein das heist dort kann nicht "submit" stehen. ich fragte nun nach einer Lösung dieses Problems.
 
An deinem Beispiel stört mich nur das jeder Browser das anders darstellt und man sehr viele Hacks anlegen muss.
 
Psyko schrieb:
<button type="submit"></button>
Zum Vergrößern anklicken....
Hab sehr wohl richtig gelsen ^^

<button type="submit"><img src="Test.gif"/></button>

dazu gibts ja schließlich <button></button>

und hier noch n Link (allerdings input. Persöhnlich find ich button besser) dazu

mfG
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben