Wie kann ich das Design der Buttons am Ende einer Lektion anpassen?

Am Ende einer Lektion werden (je nach Kurseinstellungen sowie Kursfortschritt des Teilnehmers) die Buttons "Als erledigt markieren", "Nächste Lektion" und "Vorherige Lektion" angezeigt: 

Das Design dieser Buttons lässt sich nur über die folgenden CSS-Codes anpassen.

1. CSS-Code für Button "Als erledigt markieren"

/* Button: Als erledigt markieren */	
#sfwd-mark-complete input[type="submit"] { 
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #009640;
    background-color: #ccead9;
    border-bottom: 4px solid #009640;
}

#sfwd-mark-complete input[type="submit"]:hover { 
    color: #f0f0f0;
    background-color: #4cb579;
}

Erklärung der Eigenschaften:

• font-size = Schriftgröße in Pixel (px)
• letter-spacing = Laufweite des Textes (Abstand zwischen den Buchstaben) in Pixel
• color = Schriftfarbe des Button Textes (als HEX Code)
• background-color = Hintergrundfrabe des Buttons (als HEX Code)
• border-bottom = Unterer Rand des Buttons (zuerst die Rahmendicke 4px, Rahmenstil solid = durchgezogene Linie, Rahmenfarbe)

Beim zweiten Code-Teil oben wurde dem Selektor #sfwd-mark-complete input[type="submit"] ein :hover hinzugefügt. Dies ermöglicht die Anpassung des Designs, wenn mit der Maus über den Button gefahren wird.

2. CSS-Code für Button "Nächste Lektion" und "Vorherige Lektion"

/* Button: Nächste Lektion & Vorherige Lektion*/
#learndash_next_prev_link { 
    font-size: 12px !important; 
    letter-spacing: 0.8px; 
} 

#learndash_next_prev_link a {
    color: #4085C6 !important;
    background-color: #b3cee8;
    border-bottom: 4px solid #4085C6;
}

#learndash_next_prev_link a:hover {
    background-color: #6fa8de;
    color: #f0f0f0 !important;
}

Auch hier wurde beim letzten Selektor #learndash_next_prev_link a ein :hover hinzugefügt, damit hier neue Eigenschaften für das Design vergeben werden können.

3. CSS-Code individuell anpassen

Kopiere die oben aufgeführten CSS-Codes und füge sie im Backend deiner Webseite unter "Design" > "Theme Optionen" am Ende der Seite bei "Benutzerdefiniertes CSS" ein: 

Nehme nun deine gewünschten Anpassungen am Code vor und Klicke am Ende auf den Button "Änderungen speichern".