kann ich beim css nicht beide individuell designen und beide Buttons sehen gleich aus.
Das ist nicht korrekt, da müsstest du dir mal das Thema "Selektoren" in CSS anschauen, das ist eigentlich fast schon die wichtigste Grundlage in CSS und eins der wichtigsten Konzepte in CSS.
Mit Selektoren definierst du, auf welche Elemente welche Regeln/Styles zutreffen.
Dabei kann man sehr einfache Selektoren benutzen, man kann aber auch sehr komplexe Selektoren mit Vererbung und Verkettungen aufbauen.
Hier mal die wichtigsten Beispiele:
a {
color: red;
}
Selektiert alle a-Elemente. Das verwendest du vermutlich aktuell.
.my-class {
color: red;
}
Selektiert alle Elemente mit class="my-class"
#my-id {
color: red;
}
Selektiert das Element mit id="my-id" (Darf es nur einmal pro Seite geben)
a.my-class {
color: red;
}
Selektiert alle a-Elemente, die class="my-class" haben.
.my-class.my-other-class {
color: red;
}
Selektiert alle Elemente, die my-class und my-other-class haben.
.my-class, .my-other-class {
color: red;
}
Selektiert alle Elemente, die my-class oder my-other-class (oder beide) haben.
.my-class a {
color: red;
}
Selektiert alle a-Elemente, die sich in einem Element mit der Klasse my-class befinden.
Es gibt noch mehr Selektoren, aber das sind mal die wichtigsten. Man kann sie fast beliebig kombinieren und verketten. Dabei muss man dann aber schon aufpassen, dass man es nicht übertreibt, sonst blickt man irgendwann nicht mehr durch. Das ist ein sehr häufiges Problem, wenn man CSS schreibt.
Wichtig ist auch, dass ein Element von mehreren Selektoren gleichzeitig betroffen sein kann. Beispiel:
<a class="my-class my-other-class">Link</a>
a {
color: red;
}
.my-class {
font-weight: bold;
font-family: Arial;
}
.my-other-class {
font-size: 20px;
}
Der Beispiel-Link wäre als Resultat rot, bold, in Arial und hätte Schriftgröße 20, da alle 3 Selektoren auf ihn zutreffen.
Das bietet dir beispielsweise die Möglichkeit, eine Klasse für die generellen Button- oder Link-Styles zu machen (z.B. Schriftgröße, Paddings, etc.), und dann zusätzliche Klassen, die z.B. die Farbe bestimmen. So kannst du gleichzeitig sicherstellen, dass alle Buttons generell die gleiche Form und Größe haben, aber trotzdem unterschiedliche Farben.
Dabei können sich auch Regeln gegenseitig überschreiben, ab da wird es dann kompliziert. Hier "gewinnt" dann immer der Selektor, der genauer ist. Beispiel:
<a class="my-class">Link</a>
a {
color: red;
}
.my-class {
color: green;
}
Beide Selektoren treffen zu, aber widersprechen sich. Das Ergebnis wäre, dass der Link grün wird, da "Nur Elemente mit .my-class" eben spezifischer (genauer) ist als "Alle a-Elemente". Bei einer Pattsituation, in der zwei Selektoren gleich genau sind und sich widersprechen, gewinnt der, der als letztes kommt, aber sowas sollte man auf jeden Fall vermeiden.
Generell sollte man es vermeiden, Sachen zu überschreiben, da es damit noch komplizierter wird, nachzuverfolgen, wo welche Styles herkommen.
Hier kannst du dir diese und weitere CSS-Basics anschauen:
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps