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:
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:
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:
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:
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:
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:
In diesem Beispiel haben wir unserem Button einen Schatten hinzugefügt. Die Parameter, die wir für unseren Schatten angegeben haben, sind wie folgt:
Der x-Offset ist 0, was bedeutet, dass unser Schatten direkt unter unserer
y-Schaltfläche erscheint. Der Offset beträgt 10 Pixel, Das bedeutet, dass sich unser Schatten um 10 Pixel unter unseren Button erstreckt.
Der Unschärferadius beträgt 10 Pixel, was bedeutet, dass unser Schatten einen Effekt hat
