HTML buttons zwei auf einer seite?
ich programmiere gerade in html und möchte auf einer seite zwei buttons haben die jeweils auf eine andere html seite verlinken. das problem ist aber das diese ja den gleichen anchor tags brauchen also <a href="seite2.htmll">seite zwei</a>.
aber wenn ich beide mit dem gleichen tag also "a" mache kann ich beim css nicht beide individuell designen und beide Buttons sehen gleich aus.
wie kann man das fixen?
3 Antworten
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
Ganz einfach:
HTML:
<a href="seite1.html" class="button1">seite eins</a>
<a href="seite2.html" class="button2">seite zwei</a>
CSS:
a.button1 {
border: 3px groove red;
background-color: #f99;
}
a.button1:hover {
border: 3px groove #900;
background-color: #a55;
}
a.button2 {
border: 3px groove lime;
background-color: #9f9;
}
a.button2:hover {
border: 3px groove #090;
background-color: #5a5;
}
Das oder mit id anstelle von class.
Siehe auch: https://wiki.selfhtml.org/wiki/CSS/Selektoren
Das ist kein Button. Ein Button in HTML ist folgendes:
https://www.w3schools.com/tags/tag_button.asp
<button type="button">Ich bin ein Button</button>
Was das zuweisen von unterschiedlichen CSS Eigenschaften betrefft, du kannst den beiden links unterschiedliche IDs oder Klassen geben.
<a href="seite1.html" id="LinkEins">Seite eins</a>
<a href="seite2.html" id="LinkZwei">Seite zwei</a>
Oder
<a href="seite1.html" class="LinkEins">Seite eins</a>
<a href="seite2.html" class="LinkZwei">Seite zwei</a>
In CSS kannst du eine Klasse mit mit einem Punkt und eine ID mit einer Raute angeben.
https://www.w3schools.com/cssref/sel_class.php
https://www.w3schools.com/cssref/sel_id.php
Es geht sowohl mit id als auch mit der class.
id Nutzt man wenn man nur ein bestimmtes Element ansprechen möchte.
class nutzt man wenn man mehrere Element ansprechen können möchte.
Also z.B. wenn du mehr als deine zwei Links hast und davon mehrere Links die gleichen CSS Eigenschafen haben sollen.
dankeschön das mit der id war es.