Knopfstyling in CSS | Erklärt

Das Einfügen von einfachen Schaltflächen in Ihre Website kann etwas langweilig sein. Das Hinzufügen verschiedener Stile zu ihnen kann jedoch ihren Gesamtaussehen verbessern. Dieses Styling kann unter Verwendung mehrerer CSS-Eigenschaften wie Hintergrundfarbe, Farbe, Breite, Polsterung, Box-Shadow, Übergang usw. durchgeführt werden. Hier in diesem Artikel bringen wir Ihnen bei, wie Sie Schaltflächen in verschiedenen Moden stylen können. Dieser Beitrag soll die folgenden Themen behandeln.

1. Farben von Tasten ändern
2. Ändern der Größen von Tasten
3. Erstellen von abgerundeten oder eingekreisten Tasten
4. Hinzufügen von Schwebeffekten zu Tasten
5. Hinzufügen von Effekten zu Schaltflächen
6. Hinzufügen von Schatten zu Tasten
7. 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

Taste

Mit grundlegender HTML haben wir eine Schaltfläche erstellt.

CSS

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

Taste
Taste

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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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

.btn
Hintergrundfarbe: 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:

Taste

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

.btn
Hintergrundfarbe: 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.