Stil, um Schaltflächen anders zu senden

Question

Ich habe eine Schaltfläche senden, die auf eine bestimmte Weise aussieht, aber ich möchte eine anders aussehende Schaltfläche Senden auf einer anderen Seite. Ich habe Mühe, herauszufinden, wie man den Stil für den zweiten Submit-Button ändert.

Die html wie dies für die erste Schaltfläche aussieht:

<button type="submit">Submit</button> 

Die CSS wie folgt aussieht:

input[type="submit"], 
button[type="submit"] { 
    height: 50px; 
    line-height: 48px; 
    border: 2px solid #47b475; 
    background: #47b475; 
    color: #fff; 
    width: 100%; 
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px; 

} 

Ich habe versucht, etwas zu schaffen, wie:

.button2 { 

/*bunch of code 

} 

aber ich versuchen:

<button type="submit" class="button2">Submit</button> 

Und das funktioniert nicht, so fehlt mir offensichtlich etwas. Bitte helfen Sie!

Dank

Answer 1

Sie haben laufen nur in CSS-Selektor Spezifität Problem.
Sie müssen die input[type="submit"] vor Ihrer Klasse wiederholen .button2 es präziser und damit zu machen außer Kraft setzen jeden geringeren Spezifität Stil

input[type="submit"], 
 
button[type="submit"] { 
 
    height: 50px; 
 
    line-height: 48px; 
 
    background: #47b475; 
 
    border: 2px solid #47b475; 
 
    color: #fff; 
 
    width: 100%; 
 
    font-size: 11px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
} 
 

 

 
input[type="submit"].button2, 
 
button[type="submit"].button2{ 
 

 
    background: #1CEA6E; 
 
    border: 2px solid #1CEA6E; 
 

 
}

<button type="submit">Submit</button> 
 
<button type="submit" class="button2">Submit</button>