Schaltflächen sind Elemente, die beim Erstellen interaktiver Webseiten unverzichtbar sind. Manchmal müssen wir eine Schaltfläche in der Mitte auf einer Seite oder innerhalb eines Blocks platzieren. Aber wie macht man das mit CSS?
Es gibt mehrere Möglichkeiten, eine Schaltfläche in der Mitte auszurichten. Eine davon besteht darin, die text-align-Eigenschaft zu verwenden, um den Text innerhalb des übergeordneten Elements zu zentrieren. Diese Eigenschaft zentriert jedoch nur den Text und nicht die Schaltfläche selbst.
Eine effizientere Methode ist die Verwendung einer Flexbox (eines flexiblen Containers). Fügen Sie dem übergeordneten Element der Schaltfläche eine Klasse hinzu, legen Sie die Eigenschaft display fest: flex und legen Sie die Werte justify-content und align-items als center fest. Auf diese Weise wird die Schaltfläche sowohl horizontal als auch vertikal zentriert.
Allgemeine Grundsätze zum Erstellen von Schaltflächen in CSS
Das Erstellen von Schaltflächen in CSS basiert auf einer Kombination aus Stilen und Pseudoelementen, mit denen Sie Klickeffekte, Animationen und andere interaktive Funktionen hinzufügen können.
Hier sind einige allgemeine Richtlinien, die beim Erstellen von Schaltflächen in CSS helfen können:
1. Definieren Sie den Stil der Schaltfläche: Beginnen Sie damit, den Stil der Schaltfläche zu definieren, einschließlich der Hintergrundfarbe, der Textfarbe, der Schriftart und anderer Eigenschaften, damit die Schaltfläche attraktiv aussieht und dem Gesamtdesign Ihrer Website entspricht.
2. Verwenden Sie Pseudoelemente, um Klickeffekte zu erstellen: Fügen Sie Pseudoelemente hinzu :hover und :aktiv, um einen Hover- und Klickeffekt zu erzeugen. Sie können beispielsweise die Hintergrundfarbe oder den Text einer Schaltfläche ändern, wenn Sie darauf zeigen, um sie interaktiver zu gestalten.
3. Animation hinzufügen: Wenn Sie möchten, dass die Schaltfläche beim Klicken oder Schweben animiert wird, können Sie eine CSS-Animation verwenden. Zum Beispiel können Sie eine Schaltfläche pulsieren lassen oder die Größe ändern, wenn sie gedrückt wird.
4. Platzieren Sie die Schaltfläche an der richtigen Stelle: Um eine Schaltfläche in der Mitte zu platzieren, können Sie den Stil "text-align: center" für das übergeordnete Element verwenden, um die Schaltfläche horizontal auszurichten. Um eine Schaltfläche vertikal auszurichten, können Sie die Eigenschaft "line-height" für das übergeordnete Element verwenden und sie auf die Höhe der Schaltfläche festlegen.
Das Erstellen von schönen und funktionalen Schaltflächen in CSS kann einige Anstrengungen und Experimente erfordern, aber wenn Sie diese allgemeinen Grundsätze befolgen, können Sie Schaltflächen erstellen, die die Aufmerksamkeit der Benutzer auf sich ziehen und Ihre Website interaktiver gestalten.
Stilisieren des Basiselements
Wenn wir eine Schaltfläche in CSS erstellen möchten, müssen wir ein Basiselement wie das oder-Element verwenden und Stile darauf anwenden, damit es wie eine Schaltfläche aussieht.
Es gibt mehrere Möglichkeiten, ein Basiselement zu stylen, einschließlich der Änderung der Hintergrundfarbe, des Textes, der Größe und der Form. Hier sind einige grundlegende Stile, die verwendet werden können:
Hintergrundfarbe: sie können die Hintergrundfarbe einer Schaltfläche mithilfe der Eigenschaft ändern background-color. Zum Beispiel, background-color: blue; legt die blaue Hintergrundfarbe fest.
Vordergrundfarbe: sie können die Textfarbe einer Schaltfläche mithilfe der Eigenschaft ändern color. Zum Beispiel, color: white; legt die Farbe des Textes auf Weiß fest.
Die Größe: sie können die Größe einer Schaltfläche mithilfe der Eigenschaft ändern width und height. Zum Beispiel, width: 100px; und height: 50px; legen Sie die Breite auf 100 Pixel bzw. die Höhe auf 50 Pixel fest.
Form: sie können die Form einer Schaltfläche mithilfe der Eigenschaft ändern border-radius. Zum Beispiel, border-radius: 5px; fügt der Schaltfläche abgerundete Ecken hinzu.
Dies sind nur einige grundlegende Stile, die beim Styling einer Schaltfläche in CSS verwendet werden können. Das Endergebnis hängt von Ihren Bedürfnissen und Dekorationsvorlieben ab.
Verwenden der Positionierung zum Ausrichten einer Schaltfläche
Um die Schaltfläche in der Mitte auszurichten, können Sie die CSS-Positionierung verwenden.
Der einfachste Weg, dies zu tun, besteht darin, dem Block, der die Schaltfläche enthält, die folgenden Stile festzulegen:
Erstellen Sie dann innerhalb dieses Containers eine Schaltfläche:
Die Schaltfläche wird nun in der Mitte des Containers ausgerichtet. Sie können die Schaltflächenstile nach Belieben ändern.
Wenn Sie eine Schaltfläche genau positionieren möchten, ohne Flexbox zu verwenden, können Sie andere Methoden wie die absolute Positionierung oder die Verwendung von Tabellen verwenden. Diese Methoden können komplizierter sein, aber Sie können eine genauere Positionierung der Schaltfläche vornehmen, wenn Sie dies tun müssen.
Es ist wichtig sich daran zu erinnern, dass die korrekte Positionierung von Elementen eine Herausforderung darstellen kann, insbesondere wenn Sie bereits andere CSS-Regeln haben, die die Positionierung von Elementen beeinflussen. Es wird empfohlen, Ihre Stile sorgfältig zu überprüfen und zu testen, um sicherzustellen, dass die Schaltfläche wie erwartet in der Mitte ausgerichtet ist.
Erstellen einer Schaltfläche mit einem Hintergrundbild
Um eine Schaltfläche mit einem Hintergrundbild zu erstellen, benötigen Sie ein Bild, das als Hintergrund für die Schaltfläche verwendet wird. Dieses Bild kann in jeder Größe sein und jedes Design enthalten, das Sie auf die Schaltfläche anwenden möchten.
Erstellen Sie zunächst eine Tabelle mit einer Zelle und einer Zeile. Wenden Sie dann die entsprechende CSS-Klasse für die Tabelle an, um den Hintergrund der Schaltfläche mithilfe der background-image-Eigenschaft an Ihr Bild anzupassen. Sie können auch andere Eigenschaften angeben, um das Aussehen der Schaltfläche anzupassen, z. B. Größe, Einzug, Schriftfarbe usw.
Im obigen Beispiel hat die Schaltfläche das Hintergrundbild, das Sie in der CSS-Klasse angegeben haben .button. Wenn Sie das Design der Schaltfläche ändern möchten, ersetzen Sie einfach das Bild in der CSS-Klasse durch das gewünschte Bild.
Verwenden der Flexbox zum Zentrieren einer Schaltfläche
Erstellen Sie zunächst einen Container, in dem sich Ihre Schaltfläche befindet. Sie können dazu ein Tag mit einer bestimmten Klasse verwenden.
Wenden Sie dann die Stile mithilfe von CSS auf Ihren Container an. Legen Sie die Display-Eigenschaft des Containers auf flex fest, um den Flexbox-Modus zu aktivieren. Fügen Sie die Eigenschaft justify-content mit dem Wert center hinzu, um den Inhalt horizontal zu zentrieren. Legen Sie außerdem die Eigenschaft align-items auf center fest, um den Inhalt vertikal zu zentrieren.
Als nächstes fügen Sie dem Container ein inneres Element hinzu, das Ihre Schaltfläche sein wird. Dies kann ein Tag oder abhängig von Ihren Bedürfnissen sein.
Legen Sie für eine Schaltfläche die Margin-Eigenschaft auf auto fest, um die Schaltfläche im Container automatisch auszurichten.
Hier ist ein Beispielcode:
Und passende Stile:
.button-container buttonIhre Schaltfläche wird nun sowohl horizontal als auch vertikal innerhalb des Containers zentriert.
