Anzeige

Button mit Verlauf und Symbol

Button mit Verlauf und Symbol | PSD-Tutorials.de

Erstellt von fakerer, 06.01.2012.

  1. fakerer

    fakerer Aktives Mitglied

    Dabei seit:
    03.08.2008
    Beiträge:
    804
    Geschlecht:
    männlich
    Button mit Verlauf und Symbol
    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
    Code (Text):
    1.  
    2. background: url("/images/button.png") repeat-x scroll 0 0 #F5F5F5;
    3. border-color: #8f9294;
    4. border-width: 1px;
    5.  
    Allerdings wie bringt man nun richtig den Pfeil dazu.
    Normal hab ich da immer span Elemente genommen, aber anscheinend soll man das ja nicht http://de.selfhtml.org/html/referenz/elemente.htm#input 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.
     
    Zuletzt von einem Moderator bearbeitet: 06.01.2012
    #1      
  2. simonpicos

    simonpicos Mod | Forum

    Dabei seit:
    16.02.2011
    Beiträge:
    2.468
    Geschlecht:
    männlich
    Ort:
    Taunus
    Software:
    Adobe CC (PS, Lightroom, Illustrator, Premiere, After Effects)
    Kameratyp:
    Canon EOS 600D + div. Linsen
    Button mit Verlauf und Symbol
    AW: Button mit Verlauf und Symbol

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

    Das könntest du mit :after lösen..
     
    #2      
  3. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Button mit Verlauf und Symbol
    AW: Button mit Verlauf und Symbol

    Wenn ich dich richtig verstanden habe, dürfte dir das weiterhelfen:
    Code (Text):
    1. <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?
     
    Zuletzt bearbeitet: 06.01.2012
    #3      
  4. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Button mit Verlauf und Symbol
    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...
     
    #4      
Seobility SEO Tool
x
×
×