Knopfstyling in CSS | Erklärt
- Farben von Tasten ändern
- Ändern der Größen von Tasten
- Erstellen von abgerundeten oder eingekreisten Tasten
- Hinzufügen von Schwebeffekten zu Tasten
- Hinzufügen von Effekten zu Schaltflächen
- Hinzufügen von Schatten zu Tasten
- Styling deaktivierte Schaltflächen
Lass uns anfangen.
So ändern Sie die Farben von Tasten
Zum Zweck des Änderns der Farben, insbesondere der Hintergrundfarben von Schaltflächen, wird die CSS-Hintergrund-Color-Eigenschaft verwendet. Im Folgenden haben wir Ihnen ein Beispiel vorgestellt.
Html
Mit grundlegender HTML haben wir eine Schaltfläche erstellt.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 20px 35px;
Schriftgröße: 16px;
Abgesehen davon, dass wir dem Knopf eine bestimmte Polsterung, Grenze und Schriftgröße geben, haben wir die Hintergrundfarbe roy Brown eingestellt. Sie können die Farbe nach Ihrem Wunsch ändern.
Ausgang
Eine Knopf mit einer rosigen braunen Hintergrundfarbe wurde erstellt.
Wenn Sie nur dem Rand der Taste Farben hinzufügen möchten, verwenden Sie die CSS -Rand -Eigenschaft.
CSS
.btnHintergrundfarbe: weiß;
Grenze: 2px solide blau;
Farbe: Schwarz;
Polsterung: 25px;
Schriftgröße: 16px;
Im obigen Code setzen wir die Hintergrundfarbe auf Weiß. In der Zwischenzeit erhält der feste Rand eine Länge von 2px mit blauer Farbe.
Ausgang
Ein Knopf mit blauem Rand wurde erzeugt.
Wie man die Größen von Tasten verändert
Es kann verschiedene Möglichkeiten geben, die Größe des Tastens zu verändern, und alle möglichen Möglichkeiten werden unten zusammen mit den geeigneten und punktuellen Beispielen beschrieben.
Methode 1: Durch Ändern der Polsterung von Tasten
Die erste und am häufigsten verwendete Methode, um die Größe einer Taste zu ändern, besteht darin, die Padding -Eigenschaft zu verwenden. Unterschiedliche Polsterung führt zu unterschiedlichen Größen einer Taste.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Schriftgröße: 16px;
.btn1
Polsterung: 10px 24px;
.btn2
Polsterung: 32px 16px;
Die obere und untere Seite der ersten Taste wurde von 10 PX zugewiesen, in der rechten und linke Seiten werden 24px gepolstert. Wie für den zweiten Taste sind die oberen und unteren Seiten mit einer Polsterung von jeweils 32px, während die rechte und die linke Seiten mit 16px -Polsterung angegeben werden.
Ausgang
Es wurden Knöpfe mit verschiedenen Paddings erstellt.
Methode 2: Durch Ändern der Schriftgröße
Eine andere Möglichkeit, die Größe einer Taste zu ändern, besteht darin, die Schriftgröße der TE -Taste zu ändern. Durch Erhöhen oder Verringerung der Schriftgröße wird die Größe des Tastens beeinflusst. Je größer die Schriftgröße ist, desto größer der Knopf. Betrachten Sie den Code -Snippet unten.
Html
Hier haben wir zwei Schaltflächen erstellt, um den Unterschied zwischen verschiedenen Schriftgrößen zu demonstrieren und wie sich diese auf die Knopfgrößen auswirken.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 20px 35px;
.btn1
Schriftgröße: 12px;
.btn2
Schriftgröße: 24px;
Beide Tasten wurden die gleiche Hintergrundfarbe, Farbe, Rand und Polsterung zugewiesen. Dem ersten Taste wurde jedoch die Schriftgröße von 12px und die andere Schaltfläche 24PX zugewiesen.
Ausgang
Tasten mit verschiedenen Größen wurden erfolgreich erstellt.
Methode 3: Durch Ändern der Breite der Tasten
Eine andere Möglichkeit, die Größe einer Taste zu ändern, besteht darin, die Breite anzupassen. Folgen Sie dem folgenden Beispiel.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 20px 35px;
Bildschirmsperre;
Rand: 5px 3px;
Schriftgröße: 16px;
.btn1
Breite: 20%;
.btn2
Breite: 50%;
Zum Zweck der Anzeige jeder Taste in einer neuen Zeile konvertieren wir sie in Elemente auf Blockebene und setzen ihre Ränder ein. Darüber hinaus ist die Breite der ersten Taste auf 20%gesetzt, während die Breite der zweiten Taste auf 50%eingestellt ist.
Ausgang
Schaltflächen mit verschiedenen Breiten wurden mit Erfolg erstellt.
So erstellen Sie abgerundete oder eingekreiste Tasten
Verwenden Sie das CSS-Rand-Radius-Eigentum, um abgerundete oder eingekreiste Tasten zu erstellen. Wir haben Ihnen unten ein Beispiel vorgestellt.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 25px;
Schriftgröße: 16px;
.btn1
Border-Radius: 8px;
.btn2
Grenzradius: 50%;
Im obigen Code geben wir dem Grenzradius einen Wert in Pixel, um nur die Ecken des Knopfes abzurunden. Um den Knopf jedoch zu einem vollständigen Kreis zu machen, haben wir dem Grenzradius einen Wert im Prozentsatz gegeben.
Ausgang
Ein abgerundeter und eingekreister Knopf wurde mit großer Leichtigkeit erzeugt.
So fügen Sie den Tasten einen Schwebeffekt hinzu
Um Ihre Schaltflächen interessanter zu machen, können Sie ihnen einen Schwebeffekt hinzufügen, um ihr Aussehen attraktiver zu machen. Verwenden Sie den Code -Snippet unten.
CSS
.btnHintergrundfarbe: weiß;
Grenze: 2PX Solid Rosybrown;
Farbe: Schwarz;
Polsterung: 25px;
Schriftgröße: 16px;
.BTN: Hover
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Vor dem Schwebeffekt wurde die Taste mit verschiedenen CSS -Eigenschaften gestylt. Sobald der Benutzer die Maus über die Taste bringt.
Ausgang
Es wurde ein Taste mit einem Schwebeffekt erzeugt.
Eine weitere lustige Sache, die Sie tun können, ist, dass Sie die Übergangsdauer des Schwebeffekts angeben, um sie durch die Verwendung der Übergangsdauer-Eigenschaft attraktiver zu machen.
CSS
.btnHintergrundfarbe: weiß;
Grenze: 2PX Solid Rosybrown;
Farbe: Schwarz;
Polsterung: 25px;
Schriftgröße: 16px;
Übergangsdauer: 0.5s;
.BTN: Hover
Hintergrundfarbe: Rosybrown;
Farbe weiß;
Die Übergangsdauer wurde auf 0 gesetzt.5 Sekunden.
Ausgang
Ein Schwebeffekt mit einer Übergangsdauer wurde erfolgreich hinzugefügt.
So fügen Sie den Tasten einen Verblassen hinzu
In Effekten werden zusammen mit Schwebeffekten verblasst und können mithilfe von Opacity -Eigenschaften zu Schaltflächen hinzugefügt werden. Hier ist ein Beispiel.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 30px;
Schriftgröße: 16px;
Deckkraft: 0.4;
Übergangsdauer: 0.5s;
.BTN: Hover
Deckkraft: 1;
Bevor der Schweber wirkt, wurde die Deckkraft der Taste auf 0 gesetzt.4. Wenn der Schwebeffekt initiiert, wird sich die Deckkraft mit einer Übergangsdauer von 0 auf 1 verwandeln.5 Sekunden.
Ausgang
Ein Verblassen wurde erfolgreich umgesetzt.
HWO, um Schatten zu Schatten hinzuzufügen
Mit der Box-Shadow-Eigenschaft können Schatten zu Schaltflächen hinzugefügt werden, um ihre Schönheit zu verbessern. Folgen Sie dem unten erwähnten Beispiel.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 30px;
Schriftgröße: 16px;
Übergangsdauer: 0.5s;
Box-Shadow: 0 5px 10px 0 Grau;
Im obigen Code fügen wir einen Schatten grauer Farbe hinzu und haben jede Seite des Schattens eine Länge zugewiesen.
Ausgang
Ein Schatten wurde erfolgreich in die Taste hinzugefügt.
Notiz: Sie können zusammen mit dem Schatten auch einen Schwebeffekt hinzufügen, um den Knopf weiter attraktiv zu machen.
So stylen
Um eine Deaktivierungsschaltfläche zu erstellen, müssen wir ein deaktiviertes Attribut für das Schaltflächen -Tag in HTML erwähnen, wie im HTML -Snippet unten gezeigt:
Zum Zwecke des Stylings von Behindertenschaltflächen können Sie zwei CSS -Eigenschaften verwenden: Deckkraft und Cursor. Im Folgenden haben wir gezeigt, wie Sie eine deaktivierte Schaltfläche erstellen können.
CSS
.btnHintergrundfarbe: Rosybrown;
Grenze: Keine;
Farbe weiß;
Polsterung: 30px;
Schriftgröße: 16px;
Übergangsdauer: 0.5s;
Deckkraft: 0.4;
Cursor: nicht verurteilt;
Um eine deaktivierte Schaltfläche zu erstellen, war die Deckkraft der Schaltfläche auf 0.4 und der Cursor nicht zugelassen.
Ausgang
Es wurde eine deaktivierte Taste erzeugt.
Abschluss
Das Hinzufügen einfacher Schaltflächen zu Ihren Webseiten kann etwas langweilig sein. Wenn Sie sie durch die Verwendung verschiedener CSS -Eigenschaften verwenden. Eigenschaften wie Hintergrundfarbe, Farbe, Randradius, Deckkraft, Polsterung, Breite, Box-Shadow usw. können sich nützlich erweisen, wenn sie Schaltflächen einen bestimmten Stil geben. Außerdem können Sie den Tasten wie Schwebeblößen verschiedene Effekte hinzufügen oder verblassen usw. Darüber hinaus können Sie diese Effekte auch durch die Verwendung von Übergangseigenschaften animieren. Dieser Beitrag führt zu verschiedenen Möglichkeiten, wie Sie Ihre Schaltflächen mit Hilfe von Beispielen stylen können.