Button mit Verlauf und Symbol

[fakerer]

Hallo,
ich würde gerne einen input[type="submit"] erstellen der im Hintergrund einen Verlauf einen Rand und ein Symbol (kleinen Pfeil nach rechts) hat.

Border und Background (Verlauf) hab ich einfach mal in css gesetzt

background: url("/images/button.png") repeat-x scroll 0 0 #F5F5F5;
border-color: #8f9294;
border-width: 1px;

Allerdings wie bringt man nun richtig den Pfeil dazu.
Normal hab ich da immer span Elemente genommen, aber anscheinend soll man das ja nicht keine Kindelemente erlaubt wenn ich das richtig verstehe.

Hab auch schon überlegt den Pfeil einfach in den Hintergrund zu nehmen und den dann immer rechts beginnen zu lassen aber ich würde halt gern wissen ob es da einen schönere Lösung gibt.

an ein Button element hab ich auch schon gedacht aber den kann ich ohne js nicht als submitt verwenden, zumindest so weit mir bekannt.

 

[simonpicos]

AW: Button mit Verlauf und Symbol

Was meinst du mit Pfeil? Sowas in der Art: ↓↑→← ?

Das könntest du mit :after lösen..

 

[patrick_l]

AW: Button mit Verlauf und Symbol

Wenn ich dich richtig verstanden habe, dürfte dir das weiterhelfen:

<a href="#">Name <img src="pfeil.gif" alt="pfeil"/></a>

Dann noch für diesen Button im CSS über Background den Verlauf etc. nutzen, fertig. Halt über HTML den Pfeil mit einbinden, und den Verlauf über dein CSS.
Was ich aber nicht verstehe, warum du deinem Buttom bzw. dem Bg-Image scroll mit gibst?

 

[cebito]

AW: Button mit Verlauf und Symbol

:after hat Simon schont erwähnt, es gibt auch die Möglichkeit multiple Backgrounds einzufügen. Einfach mal googeln...

@Otto - du hast schon gelesen, das es sich nicht um einen einfachen Link sondern einen Submit-Button handelt...