Aussehen eines buttons mit CSS ändern

[Pitwheazle]

Ich habe es geschafft, meinen diversen Links einen button zu verpassen. Mir ist es aber nicht gelungen, deren Aussehen anzugleichen (die sehen immer anders aus).
Den hier z.B.:

Code: Alles auswählen

<nav>
    <button  type="submit">
         <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
     </button>
</nav>

Egal, ob ich den dem button eine Klasse zuweise, oder den Eintrag zu "nav a" ändere, das ändert nix.

[Whitie]

Da fehlen einige Informationen. Benutzt du ein CSS-Framework? Wenn ja, welches?
Wenn nicht ist vielleicht Milligram was für dich (sehr schlank), oder wenn es etwas mehr mitbringen soll Bulma. Beide kommen ohne Javascript und sind angenehm zu benutzen. Ich meine, ich habe bei meiner Demo damals Milligram verwendet.

Viele Grüße
Whitie

[Pitwheazle]

Da fehlen einige Informationen. Benutzt du ein CSS-Framework?
Ich meine, ich habe bei meiner Demo damals Milligram verwendet.

Ich benutze zurzeit kein CSS-Framwork. Stimmt, du hattest Miligram verwendet. Ich wollte das halt ursprüngich alles selbst lernen (Auweh, da habe ich mich wahrscheinlich auch übernommen). Mir hat sich der Sinn des Frameworks nicht gleich erschlossen. Geht das nicht auch einfach ohne?

[Whitie]

Na klar geht das auch ohne. Aber Milligram sorgt z. B. ganz ohne eine Klasse schon mal für eine angenehme Optik, die auch in jedem Browser gleich aussieht.

Grüner Button (weiße Schrift):

Code: Alles auswählen

<nav>
    <button  type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
         <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
     </button>
</nav>

Das sollte man dann natürlich in eine CSS-Datei packen und eine oder mehrere Klassen draus machen.

Gruß

Edit: Etwa der selbe Button mit Bulma erstellt

Code: Alles auswählen

<button class="button is-success"><a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a></button>

[Pitwheazle]

Da bin ich anscheinend zu dusselig dazu.
Also in CSS zB. mit ".button{...} und im Template dann "button type="submit" class="button"" geht schon mal nicht.

[Whitie]

Wird die CSS-Datei denn geladen? Funktioniert es, wenn du es direkt angibst (wie in meinem Beispiel)? Hast du den Cache des Browsers mal geleert?

[Pitwheazle]

Wird die CSS-Datei denn geladen? Funktioniert es, wenn du es direkt angibst (wie in meinem Beispiel)? Hast du den Cache des Browsers mal geleert?

Wenn ich es direkt eingebe:

Code: Alles auswählen

<nav>
    <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
        <a href="{% url 'loesung' zaehler_id protokoll_id %}">Lösung</a>
    </button>
    {% if hilfe  %}
        <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
            <a href="{% url 'hilfe' zaehler_id protokoll_id %}"> Hilfe</a>
        </button>
    {% endif %}
    <button type="submit" style="background-color: #4CAF50;border: none;color: white;padding: 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;">
        <a href="{% url 'abbrechen' zaehler_id %}">Abbrechen</a>
    </button>
</nav> 

... kommt das raus:

... ein Teil funktioniert (grün) ein Teil nicht (unterstrichen).
Ja, geladen wird CSS, den Rest kann ich ja ändern.
Stimmt das mit dem Punkt (.button {})? Das habe ich bisher nämlich nur mit "<div class=".." eingesetzt.
Cache habe ich geleert.

[Whitie]

Dann musst du mal in den Entwicklertools (vom Browser) schauen, woher die Styles kommen.

[Sirius3]

Es ist sehr seltsam, ein Formular zu haben, dann aber den Submit-Button mit einem extra Link auszustatten. Warum brnutzt Du nicht das Formular, wie es vorgesehen ist?

[Pitwheazle]

Falls es interessiert - ich habe es jetzt so gelöst, dass ich die Buttons in "footer" und "nav" eingeschlossen habe und das entsprechend in CSS formatiert habe. Z.B so:

Code: Alles auswählen

        <footer>
            {% if 'drei' in message_unten %}
                <nav>
                    <button type="button">
                        <a href="{% url 'kategorien'  %}">weiter</a>
                    </button>
                </nav>
                ...