Schaltflächen sind eines der Hauptelemente der Benutzeroberfläche, das bei der Erstellung von benutzerfreundlichen und intuitiven Websites und Anwendungen eine wichtige Rolle spielt. Manchmal ist die Standardgröße einer Schaltfläche möglicherweise nicht ausdrucksstark genug oder passt nicht zum Design eines Projekts. Aber keine Sorge - es gibt einige einfache Möglichkeiten, die Größe einer Schaltfläche in CSS zu erhöhen und sie für Benutzer sichtbarer zu machen.
Die erste Methode besteht darin, die Größe der Schaltfläche auf eine feste Größe festzulegen, indem Sie die Werte für die Eigenschaften width und height in CSS festlegen. Dadurch können Sie die gewünschte Größe der Schaltfläche genau bestimmen. Sie können beispielsweise einen Wert in Pixeln oder Prozentsätzen verwenden. Fügen Sie der Schaltfläche eine Klasse oder einen Bezeichner hinzu, und wenden Sie die gewünschten Werte auf dieses Element an.
Die zweite Methode besteht darin, die relativen Werte der Eigenschaften width und height zu verwenden. Zum Beispiel können Sie einen Wert in em oder rem verwenden, der auf der Schriftgröße basiert. Dadurch können Sie adaptive Schaltflächen erstellen, die ihre Größe entsprechend der aktuellen Schriftgröße auf der Seite oder dem Gerät des Benutzers ändern.
Die dritte Möglichkeit besteht darin, die Eigenschaften transform und scale zu verwenden. Wenn Sie die scale-Eigenschaft anwenden, können Sie die Größe eines Elements vergrößern oder verkleinern, ohne seine Position zu ändern. Sie können beispielsweise einen Wert von 1.2 oder 150% auf eine Schaltfläche anwenden, um ihre Größe um 20% zu erhöhen. Verwenden Sie die transform-Eigenschaft in Kombination mit anderen CSS-Eigenschaften, um gummiartige und interaktive Effekte auf der Schaltfläche zu erstellen.
Methode 1: Verwenden der width-Eigenschaft
Sie können die Breite der Schaltfläche ändern, indem Sie die Eigenschaft anwenden width mit dem gewünschten Wert in den CSS-Regeln des Elements:
In diesem Beispiel wird der Schaltfläche eine Größe mit einer Breite von 200 Pixeln zugewiesen. Sie können diesen Wert je nach Ihren Bedürfnissen ändern.
Es kann auch nützlich sein, relative Werte für width zum Beispiel Prozentsätze, um adaptive Schaltflächen zu erstellen, die auf verschiedenen Geräten korrekt angezeigt werden.
Hier ist ein Beispiel für das Ändern der Breite einer Schaltfläche mit einem Prozentwert:
In diesem Fall nimmt die Schaltfläche die Hälfte der verfügbaren Breite des übergeordneten Elements ein.
Methode 2: Ändern der Größe mit der Padding-Eigenschaft
Um die Größe einer Schaltfläche mithilfe der Padding-Eigenschaft zu vergrößern, müssen Sie den Wert der Padding-Eigenschaft für die Schaltfläche festlegen. Sie können beispielsweise den folgenden CSS-Code verwenden:
| Kode | Die Beschreibung |
|---|---|
| .button | Wählen Sie die Klasse der Schaltfläche aus |
| padding: 10px 20px; | Stellen Sie die Einrückung innerhalb der Taste ein - 10px oben und unten, 20px links und rechts |
In diesem Beispiel erhöhen wir die Größe einer Schaltfläche, indem wir darin Einrückungen hinzufügen. Sie können den Wert 10px für die Einrückung von oben und unten und 20px für die Einrückung von links und rechts je nach den gewünschten Schaltflächengrößen ändern.
Mit der Padding-Eigenschaft können Sie die Größe einer Schaltfläche leicht vergrößern, ohne den Text oder die Schriftgröße ändern zu müssen. Dies ist eine praktische Methode, mit der Sie Schaltflächen in allen Größen und Formen erstellen können.
