css buttons

[fakerer]

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

<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.

    .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?

 

[simonpicos]

AW: css buttons

http://www.cssbuttongenerator.com/

einfach mal css3 button generator googlen gibt noch einige weitere

 

[fakerer]

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

 

[world]

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]

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