Antworten auf deine Fragen:
Neues Thema erstellen

css buttons

fakerer

Aktives Mitglied

Hallo,
wieder mal ärgere ich mich über Buttons :)
ich würde gern einfach Buttons haben die zumindest mal in allen Browsern gleich aussehen.
Hier mein html ausgangsmaterial wenn man so will :)

HTML:
<a class="button">Button</a>
<a class="button pfeil">Button</a>
<br/><br/>
<input class="button" type="submit" value="Button"/>
<input class="button pfeil" type="submit" value="Button"/>
<br/><br/>
<button class="button">Button</button>
<button class="button pfeil">Button</button>

ich hätte mal versucht den Buttons einen hintergrund zu geben und einen Rahmen.
Pfeil bekommen sie einen Hintergrund mit einem Pfeil, aber das ist mir mal egal.

und hier mal mein css versuch.
Code:
    .button{
        background: url("/button.png") repeat-x scroll 0 -1px #F5F5F5;
        border: 1px solid #8e9295;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-weight: normal;
        text-decoration: none;
        height: 23px;
        padding-left: 10px;
        padding-right: 10px;
    }
    a.button{
        padding-top: 4px;
        padding-bottom: 4px;
        line-height: 23px;
    }
    .pfeil{
        background-position: right;
        padding-right: 36px;
    }

    /* Target all Firefox */
    @-moz-document url-prefix() {
        .button{
        padding-left: 6px;
        padding-right: 6px;
    }
    a.button{
        padding-left: 12px;
        padding-bottom: 3px;
    }
    .pfeil{
        padding-right: 31px;
    }    
    }

    /* Target IE 8 */
    @media \0screen {
        a.button{
            padding-top: 3px;
            padding-bottom: 3px;
        }
    }

    /* Target IE 7 */
    *+html .button{
        padding-left: 0px;
        padding-right: 0px;
    }
    *+html a.button{
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 3px;
        padding-bottom: 3px;
        background-position: 0 0;
    }
    *+html .button.pfeil{
        background-position: right 0px;
        padding-right: 13px;
    }
    *+html a.button.pfeil{
        background-position: right 0px;
        padding-right: 22px;
    }

mach ich grundlegend was falsch, gibts da schon wo Lösungen oder so?
 

fakerer

Aktives Mitglied

AW: css buttons

das problem mit den Generatoren ist halt das die immer ein div oder so nehmen
ich hätte ja gern das gleich aussehen egal ob input button oder a element :(
 
W

world

Guest

AW: css buttons

http://css-tricks.com/examples/ButtonMaker/#

Gestalte deinen Button und wenn alles passt dann klickst du auf den Button und bekommst den CSS Code. hier mal ein Beispiel:

.button {
border-top: 1px solid #19a4fa;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3f5c70), to(#65a9d7));
background: -webkit-linear-gradient(top, #3f5c70, #65a9d7);
background: -moz-linear-gradient(top, #3f5c70, #65a9d7);
background: -ms-linear-gradient(top, #3f5c70, #65a9d7);
background: -o-linear-gradient(top, #3f5c70, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
 

fakerer

Aktives Mitglied

AW: css buttons

hat sich schon mal jemand http://yuilibrary.com/ angesehen, verwendet?
Sieht eigentlich gar nicht so schlecht aus.

Würde gern wissen ob sich das mit jquery verträgt.

zumindest sind die buttons auf den ersten blick für mehr browser geeignet als die jquery ui die schwächeln schon beim ie7
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben