Formularbutton CSS

Question

ich bin neu in HTML und ich versuche gerade, eine Vorlage im Moment zu bearbeiten. Eine Registrierungsschaltfläche in einer ungeordneten Liste hat mich geworfen.

Heres einige Infos:

Auf der Vorlage ich es ein Teil des Systems Kontoeröffnung bis integrieren musste, um den Link zu einem Formular-Taste ändern, um ... Nachdem ich das Formular Taste dort platziert es gedreht out wie folgt aus: https://gyazo.com/82c807d59162ada63dcaeea69b2fd340

der alte Code sah wie folgt aus:

<li><a href="#">Sign Up Now!</a></li> 

und der neue Code sieht wie folgt aus:

<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</a></li> 

musste ich auch diese in den Code in der Fußzeile einfügen es zu integrieren:

<script type="text/javascript" src="#"></script> 

ich die Links genommen habe gerade für Anonymität heraus.

Auch der untere Teil der Liste, wo es jetzt heißt: "Jetzt anmelden!" soll grün sein und dann beim Mouseover schwarz werden.

Die CSS-Dateien aus der Vorlage sind jedoch ziemlich umfangreich und der Abschnitt mit allen .btn CSS-Teilen ist nur eine lange unstrukturierte Liste, die schwer zu verstehen ist. Und darüber hinaus kann ich nicht herausfinden, wie man den Formular-Button mit dem .btn-Teil des CSS verbindet.

Vielen Dank im Voraus für jede Hilfe :)

Answer 1

Ihre Markup einen falschen End-Tag für <button> haben. Es sollte sein:

<li><button type="button" class="order-button" data-product="1" >Sign Up Now!</button></li> 

Answer 2

Eine Alternative ist, Ihre benutzerdefinierte CSS am Ende der CSS-Datei hinzuzufügen. Thay Art und Weise Sie diese Klasse hinzufügen könnte:

.order-button{ 
 

 
    /* Styles for button here */ 
 
    
 
} 
 

 
.order-button:hover{ 
 
    
 
    /* Styles for mouseover here */ 
 
    
 
}