abgerundeter button in css?

[Gamer20]

wie kann ich einen abgerundeten button erstellen?

also wie im bild zu sehen is, wird der farbverlauf durch ein eckiges bild dargestellt. jeztt fehlt mir nur noch (für mein menu) die mousoverfunktion mit den abgerundeten ecken bzw. das erscheinen des buttons!

weiß jemand wie so etwas erzeugt wird?

wäre für hilfe dankbar (befasse mich das 1. mal mit css)!

[nOe]

Vorausgesetzt, du meinst mit Button "<input type="submit" ..", dann würde ich dir empfehlen ".. style="background-image:url("Path/to/img.png");">" zu benutzen. Und natürlich den Rand auf 0 setzen...

mfg nOe

[Gamer20]

naja oder wie kann ich im allgemeinen so eine art button erzeugen (ohne das ich jetzt photoshop bemühen muß)!

da muß es doch ne css function geben, oder?

und wenn ich den link (button) anklicke, bleibt darauf dann die makierung (wie auf dem bild)!

also ohne das ich mit der maus drüber gehe, sollt es so ausschauen und wenn ich mit der maus drüber gehe, so wie im 1. beitrag!

[nOe]

Direkt einen Button kannst du nicht mit CSS erstellen, du müsstest ihn formatieren, und auch das ginge nur bedingt, z.b. Rand, Hintergrundfarbe, Schriftart/-farbe..

Und ehrlich gesagt verstehe ich nicht was du meinst mit der Markierung, denn in dem .png - Bild sehe ich keine..

Gruß, nOe

[Gamer20]

so ok ich habs jetzt mit reinem html und bildern gemacht!

jetzt soll nur, wenn ich ein button (bild) anklicke, der farbverlauf net grau sein, sondern (später) blau und es soll dann "gedrückt" bleiben!

heißt nach dem anklicken bleibt der farbverlauf auf blau und verschindet net wieder (so wie jetzt durch mouseover und mouseout -> von grau wieder auf weiß)!

[nOe]

Dann musst du noch einen zweiten Button (Bild) mit Photoshop erstellen, in dem der Verlauf blau ist. Und dann schreibst du in die CSS-Datei:

a.menu:active {
background-image:url("Path/to/img.png");
}

Zusätzlich musst du noch in deinem "<a href="#" .." Tag " .. class="menu">" hinzufügen, da du ansonsten nicht auf a.menu zugreifen könntest...

Versuch macht klug!

[Gamer20]

gibts für mein vorhaben dazu ein tutorial? da ich es mir sonst sehr schlecht vorstellen kann, wie ich es einbauen soll.

im moment hab ich ja folgenden code für den 1. button (ohne CSS Code, also allesn ur html):

<tr>
<td width="100" align="center">
<a href="#" onMouseOver="image.src='Bilder/A-Button.gif';" onMouseOut="image.src='Bilder/A-Button2.gif';">
<img name="image" src="Bilder/A-Button2.gif" border=0></a></td>
....

[Wyveres]

Original geschrieben von Gamer20
gibts für mein vorhaben dazu ein tutorial? da ich es mir sonst sehr schlecht vorstellen kann, wie ich es einbauen soll.

im moment hab ich ja folgenden code für den 1. button (ohne CSS Code, also allesn ur html):

<tr>
<td width="100" align="center">
<a href="#" onMouseOver="image.src='Bilder/A-Button.gif';" onMouseOut="image.src='Bilder/A-Button2.gif';">
<img name="image" src="Bilder/A-Button2.gif" border=0></a></td>
....

a
a:hover <--- OnMouseOver
a:visited
a:visited:hover 

css4you

ich denke das was du suchst sind erstmal die CSS eigenschaften oder besser Pseudoelemente Hover Visited usw.

zusätzlich ^^

background-image:url(); 

du kannst das im grunde so lösen wie du willst.
verschachteln vererben usw. lies dir am besten erstmal die oben genannte url durch. vieleicht verstehst du dann besser.

mfg Wyveres