html: wie button zentrieren und farbe ändern?
hallo, wie kann ich in html einen button, den ich wie folgt gemacht habe, zentrieren und die farbe ändern.
html:<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button>Buche deine Session hier</button>
</a>
css:.button {
text-align: center;
}
button {
font-size: 20px;
background-color: yellow;
cursor: pointer;
color: green;
}
hab ich irgendwo einen fehler oder muss man das anders machen, den bei mir ändert sich gar nichts.
5 Antworten
HTML
<div class="button-container">
<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button class="button">Buche deine Session hier</button>
</a>
</div>
CSS
.button-container {
display: flex;
justify-content: center;
align-items: center;
}
.button {
font-size: 20px;
background-color: #FFA07A; /* Farbe geändert zu 'Light Salmon' */
cursor: pointer;
color: white; /* Textfarbe geändert zu Weiß */
border: none; /* Entfernt den Standardrahmen */
padding: 10px 20px; /* Fügt etwas Abstand innerhalb des Buttons hinzu */
text-align: center;
text-decoration: none; /* Entfernt die Unterstreichung des Links */
display: inline-block; /* Ermöglicht das Zentrieren des Buttons */
margin: 4px 2px; /* Fügt Außenabstand hinzu */
transition-duration: 0.4s; /* Fügt eine Übergangsanimation hinzu */
}
.button:hover {
background-color: #FF6347; /* Dunklere Farbe für den Hover-Zustand */
color: white;
}
Naja.. aber wieso benutzt der Fragestelle nicht selbst ChatGPT?
Ein <button> darf nicht in einem <a> vorkommen. Auch wenn dein Browser es möglicherweise richtig darstellt, ist das ein Fehler und kann zu Problemen führen.
Die richtige Lösung ist, das Aussehen des Links zu ändern:
<p class="centered">
<a class="button" href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
Buche deine Session hier
</a>
</p>
CSS:
.centered {
text-align: center;
}
.button {
display: inline-block;
padding: 1rem;
font-size: 20px;
background-color: yellow;
color: green;
border: 1px solid green;
border-radius: 4px;
text-decoration: none;
}
Hier ist ein CodePen zum ausprobieren.
vielen Dank hat mich schonmal ein Stück weiter gebracht, allerdings lässt sicher Button immernoch nicht zentrieren. Ich hab des an sich so rüber kopiert, nur farbe nochmal geändert und den class namen geändert. Was könnt ich noch tun, damit der Button zentriert ist? ich denke nicht das es daran liegt, das ich den Button in ner PHP datei benuzten will, oder etwa doch?
Der Button sollte in einem Container (z.B. <p>) sein, und dieser Container sollte
text-align: center;
haben.
das habe ich auch so, aber gut wenns sonst eigentlich funktionieren sollte schau ich da später nochmal, den Server den wir benutzen müssen funktioniert manchmal irgendwie nicht immer. Aber trozdem vielen Dank.
HTML:
<div class="container">
<a class="btn is-black" href="#">Deine Session buchen</a>
</div>
CSS:
.container {
width: min(100% - 1em, 65em);
margin-inline: auto;
display: flex;
/* Link/Button horizontal zentrieren */
justify-content: center;
/* Link/Button vertikal zentrieren */
align-items: center;
}
.btn {
text-decoration: none;
padding: .75rem 1.25rem;
border-radius: 100vh;
background-color: black;
color: white;
}
Du kannst Eigenschaften wie Farben auch in eigene Klassen auslagern. Sprich erst allgemeine Regeln anlegst und anschließend über zusätzliche Klassen definierst, welche Farben der jeweilige Button oder ein anderes Element haben soll.
CSS:
.btn {
text-decoration: none;
padding: .75rem 1.25rem;
border-radius: 100vh;
background-color: var(--_bg-color, white);
color: var(--_color, black);
}
.btn.is-black {
--_bg-color: black;
--_color: white;
}
.btn.is-green {
--_bg-color: green;
--_color: white;
}
background-color: yellow; - passt doch :)
Für button und img zum zentrieren:
display: block;
margin: auto;
a {
display: flex;
justify-content: center;
}
müsste funktionieren, so ausm Kopf.
Da nutzt jemand ChatGPT