Javascript-Schaltfläche Css

| | | | | | | |

Wenn Sie eine Website entwerfen, haben Sie oft eine Schaltfläche, die Sie auf eine bestimmte Weise anzeigen möchten. Sie möchten beispielsweise, dass eine Schaltfläche eine Hintergrundfarbe gegenüber anderen Elementen auf der Seite hat, um die Aufmerksamkeit des Benutzers auf die Schaltfläche zu lenken.

Unter Verwendung von CSS können Entwickler Schaltflächen mit Stilen erstellen. Mit CSS können Sie unter anderem Folgendes ändern.

Farbe, Textgröße, Rand, Breite und Höhe einer Schaltfläche. Dieses Tutorial erläutert anhand von Beispielen, wie Sie eine Reihe von CSS-Eigenschaften verwenden, um HTML zu formatieren Taste. Wenn Sie dieses Tutorial fertig gelesen haben, werden Sie ein Experte im Gestalten von Schaltflächen mit CSS sein.

Übersicht über Schaltflächen

Sie können eine Schaltfläche auf verschiedene Weise in HTML definieren. Die beiden gängigsten Ansätze sind Finden Sie Ihren Bootcamp-Match

Wenn wir unseren Button stylen wollen, also das Aussehen der Seite anpassen wollen, müssen wir CSS verwenden.In diesem Artikel werden wir besprechen, wie man folgendes auf einem Button macht: ..

  • Hintergrundfarbe ändern
  • Textfarbe ändern
  • Größe des Textes ändern.
  • Auffüllung hinzufügen.
  • runden Sie die Ecken ab.
  • Fügen Sie einen farbigen Rand hinzu.
  • Verwenden Sie es: .... Hover-Funktion
  • Fügen Sie Schatten hinzu
  • Breite ändern
  • ausschalten
  • animieren.

Wir werden auch besprechen, wie man Gruppen von horizontalen und vertikalen Schaltflächen erstellt.

Rückseite - Flächenfarbe

Während der Gestaltung eines Buttons sollten Sie als erstes eine Hintergrundfarbe festlegen - Button planen Standardmäßig hat ein Button einen weißen Hintergrund und schwarzer Text Durch die Verwendung der CSS-Hintergrundfarbe können wir c und die Hintergrundfarbe einer Schaltfläche ändern.

Angenommen, Sie entwerfen eine Schaltfläche für eine Website und möchten, dass die Schaltfläche einen rosafarbenen Hintergrund hat. Wir können die Farbe unseres Buttons mit dem folgenden CSS-Code ändern:

Unser Code gibt zurück:

Screen Shot 2020 04 03 bis 13.10.32

Mit der Eigenschaft background color haben wir die Hintergrundfarbe geändert unseres Buttons auf Pink. Wir können die Hintergrundfarbe unseres Buttons mit dieser Eigenschaft in eine Farbe ändern.

Textfarbe

Um die Textfarbe eines Buttons zu ändern, können Sie die verwenden color property. a button und möchten, dass die Schaltfläche einen rosa Hintergrund und den Text in Grün hat. Wir könnten diese Schaltfläche mit dem folgenden Code erstellen:

Unser Code gibt zurück:

 ad Dtfk7RIpGyKmzp9eDBrGsFWlOFbIn WMLsfL2IlEEs4TFEHnscuJ3bhsZdx5GEz3zR2bv5Ec3W2eH49suj BISbjhj Ib0gv 4ETJxxUJRp Mxzhop8cvg2 verwenden wir in der grünen Zahl <x> 8gy> 8gy>> verwenden wir die Eigenschaft MxzPG8cvG2: um die Farbe des Textes in ou festzulegen r grüne Schaltfläche.</p><h2>Textgröße</h2><p>Sie können die CSS-Eigenschaft font-size verwenden, um die Größe des Textes in einer Schaltfläche festzulegen. Angenommen, wir möchten, dass der Text eine Schriftgröße von 20 Pixel hat. Wir können dies erreichen, indem wir den folgenden Code verwenden:</p> <p>Unser Code gibt zurück:</p><figure class = Screen Shot 2020 03 25 A 08.33.23

Unsere Schaltfläche hat dieselbe Größe wie vorher, aber jetzt Die Größe der darin enthaltenen Zeichen beträgt 20 Pixel. Wir haben das Attribut "Schriftgröße" verwendet, um die Größe des Textes in unserer Schaltfläche festzulegen.

Padding

Beim Entwerfen einer Schaltfläche können Sie dies festlegen Sie möchten einen gewissen Abstand zwischen dem Text innerhalb einer Schaltfläche und den Außenwänden der Schaltfläche. Hier kommt die Eigenschaft padding ins Spiel .

Die Eigenschaft padding verwendet Längenindikatoren (px, em und usw.) oder Prozentwerte, um einen bestimmten Abstand zwischen Textschaltflächen und ihren Rändern zu definieren.

Angenommen, wir möchten zwei Schaltflächen auf unserer Seite erstellen. Eine Schaltfläche sollte 40 Pixel Abstand haben und die andere sollte 20 Pixel Abstand haben. Wir können diese Schaltflächen mit dem folgenden Code erstellen:

Unser Code gibt zurück:

 Screenshot 2020 03 25 to 08.39.39

Sie können die Eigenschaft border-radius verwenden, um rechteckige Schaltflächen mit abgerundeten Ecken zu erstellen. Hier sind drei Codebeispiele, die die Eigenschaft border-radius verwenden. Um den Effekt unterschiedlicher Radiusgrößen zu veranschaulichen, verwendet jedes Beispiel einen Randradius unterschiedlicher Größe.

Unser Code gibt zurück:

 Screenshot 2020 03 25 at 08.49.42

Unser Button hat einen weißen Hintergrund, sein Inhalt ist schwarz und hat an allen Rändern 25 Pixel Abstand. Wir haben die Eigenschaft border verwendet, um einen 3 Pixel breiten durchgehenden Rahmen um unseren zu erstellen Schaltfläche und setzen Sie unsere Rahmenfarbe auf # ffb6c1, was der Hexadezimalwert für Hellrosa ist.

Wenn Sie mehr über Rahmeneigenschaften erfahren möchten, lesen Sie unseren Artikel über CSS-Rahmeneigenschaften

Hover

Sie können das Selektor-CSS verwenden. hover können Sie eine Webseite anweisen, den Stil einer Schaltfläche zu ändern, wenn ein Benutzer mit der Maus über die Schaltfläche fährt Cursor.

Angenommen, Sie erstellen eine Schaltfläche mit schwarzem Text und weißem Hintergrund und möchten, dass sich die Textfarbe in Weiß und die Hintergrundfarbe in Grün ändert, wenn der Benutzer die Maus darüber bewegt. Sie. Wir können dies mit dem folgenden Code tun:

Hier ist das Ergebnis unseres Codes:

Screenshot 2020 03 25 at 08.53.10

Die erste Schaltfläche im obigen Diagramm zeigt, wie unsere Schaltfläche aussieht wie wenn der Benutzer den Mauszeiger über die Schaltfläche bewegt. Wie Sie sehen können, gibt der Code eine weiße Schaltfläche mit schwarzem Text, einem rosa Rand und einer 25-Pixel-Auffüllung zurück. Dies ist der Standardzustand der Schaltfläche. Aber wenn die Maus über die Maus bewegt wird Schaltfläche wird die Hintergrundfarbe der Schaltfläche grün und die Textfarbe der Schaltfläche weiß.

Sobald der Mauszeiger des Benutzers von der Schaltfläche wegbewegt wird, kehrt die Schaltfläche in ihren Standardzustand zurück.

, können Sie auch das Übergangsdauer-Attribut verwenden, um anzugeben, wie lange sich die Schaltfläche ändern soll, nachdem der Benutzer mit dem Mauszeiger darüber schwebt. Wenn wir also 1 Sekunde dauern möchten, bevor sich die obige Schaltfläche ändert (in einem grünen Hintergrund und weißer Text) wir kann diesen Code verwenden:

Wenn Sie jetzt mit der Maus über die Schaltfläche fahren, dauert es eine Sekunde, bis die Änderungsschaltfläche angezeigt wird. Weitere Informationen zu CSS-Übergängen finden Sie in unserem Leitfaden für Anfänger zu CSS-Übergängen .

Schatten

Sie können ihn verwenden CSS-Box-Shadow-Eigenschaft zum Erstellen von Schaltflächenschatten. Die Box-Shadow-Eigenschaft akzeptiert mehrere Parameter. Sie können mehr über diese Parameter in unserem Box-Shadow-CSS -Tutorial erfahren.

Nehmen wir an, wir entwerfen eine Schaltfläche und wir wollen es einen Schlagschatten haben. Wir können diesen Schatten mit dem folgenden Code für die Schaltfläche erstellen:

Unser Code gibt zurück:

Screenshot 2020 03 25 to 08.57.09

In diesem Beispiel haben wir unserem Button einen Schatten hinzugefügt. Die Parameter, die wir für unseren Schatten angegeben haben, sind wie folgt: