[ERLEDIGT] Wie benutze ich CSS Style richtig auf einem Button?

[mike2033]

Hallo,

ich habe mich mal etwas an CSS gewagt und möchte meinen Button verschönern. Zum Designen habe ich mir CSSButtonGenerator ausgesucht. Dies erleichtert es erheblich. Laut dem CSSBG muss man Buttons wie folgt einbinden:

<a href="#" class="classname">Text</a>

Dies funktioniert bei mir auch problemlos, jedoch versuche ich mit Input meine buttons zu erstellen. Der Code sieht aus wie folgt (einbinden aus einer CSS Files kommt später).

<style type="text/css">
.classname {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
    box-shadow:inset 0px 0px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:3px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:Arial;
    font-size:22px;
    font-weight:bold;
    padding:2px 12px;
    text-decoration:none;
    text-shadow:5px 0px 15px #ffffff;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.classname:active {
    position:relative;
    top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>


<div class='container'>
    <input type='submit' name='Submit' value='Test' />
</div>

Wie könnte ich dass hinkriegen?

MfG.

 

[Tronjer]

Ein Link ist ein Link und ein Button ist ein Button. Dafür gibt es die Tags <input /> und <button>.

 

[mike2033]

Ein Link ist ein Link und ein Button ist ein Button. Dafür gibt es die Tags <input /> und <button>.

Und wie verwende ich dies auf dem input Tag?

 

[Tronjer]

input {
    // CSS Attribute
}

 

[mike2033]

input {
    // CSS Attribute
}

Und wie mache binde ich eine CSS Datei ein wobei die CSS Werte auf einen Button der wie folgt aufgebaut ist gelten sollten?

[COLOR=#000000][FONT=courier new]<input type="submit" value="Submit">[/FONT][/COLOR]

 

[Sentence]

Entweder CSS:

input[type="submit"] {
// CSS Attribute
}

Da könnt der IE aber ins straucheln kommen, oder CSS:

.buttonklasse {
    // CSS Attribute
}

und

<input type="submit" class="buttonklasse" value="Submit">

MfG

 

[mike2033]

Vielen Dank Sentence! :)