CSS -Schaltfläche Klick
Beispiel 01: Verwenden von CSS, um eine Schaltfläche in einer HTML -Datei einen Sprungwirkung zu erzeugen
In diesem Beispiel werden wir Style -Tag -CSS verwenden, um eine Schaltfläche zu einem Klickeffekt zu verwandeln. Wir konzentrieren uns auf den Nachwirkungen eines Klickens auf die Schaltfläche und animieren Sie die Schaltfläche, um einen Klickeffekt zu erzeugen.
Wir haben ein Style -Tag im Header der Datei geöffnet, in dem wir das Styling der Schaltfläche in einer separaten Klasse definieren, die in jedem Schaltflächen -Tag in der gesamten Datei aufgerufen werden kann. Wir werden die Klammern öffnen, nachdem wir der Klasse einen Namen gegeben haben. Anschließend werden wir mit der Polsterung (in Pixel) beginnen, um die Schaltfläche auf der Seite anzupassen. Dann geben wir die Button -Hintergrundfarbe. Danach wird die Box-Shadow-Eigenschaft verwendet. Der Wert würde aus dem Pixelformat für den Schatten und das RGBA -Format für die Farbe des Schattens bestehen. Dann geben wir der Taste einen Zeiger -Cursor. Wenn die Schaltfläche klickt, wird der Cursor aufgrund dieser Eigenschaft transformiert. Die letzte Eigenschaft ist die Übergangseigenschaft, die die Reaktionszeit der Button -Animation angibt.
Nach dem Schließen der Klammern werden wir eine andere Funktion für diese Klasse separat klassifizieren. In dieser Funktion geben wir die Transformationsskala und die Änderung im Schatten des Randes mit demselben Format an, das wir zuvor verwendet haben. Danach öffnen wir das Körpermarke und geben ihm einen Übergang und einen Knopf. Im Button -Tag erwähnen wir den Namen der Klasse, den wir gerade im Style -Tag erstellt haben, das im Header der Datei vorhanden ist.
Wir können sehen, dass die Taste in der obigen Ausgabe einen Schatten hat und die Polsterung sichtbar ist. Obwohl die Animation im Browser sichtbarer wäre, aber das Styling ist im obigen Snippet sichtbarer.
Beispiel 02: Verwenden Sie CSS, um eine Schaltfläche in einer HTML -Datei zu beenden
In diesem Beispiel werden wir CSS -Style -Tags verwenden, um beim Klicken eine Schaltfläche Sprung zu machen. Wir konzentrieren uns auf das Ergebnis einer Schaltfläche Klicken und animieren Sie die Schaltfläche, um einen Sprungeffekt zu erzielen.
Im obigen Skript haben wir im Header der Datei ein Style -Tag geöffnet, um das Styling der Schaltfläche anzugeben. Der Stil der Schaltfläche wird in einer separaten Klasse gespeichert, die im gesamten Projekt in einem beliebigen Schaltflächen -Tag verwendet werden kann. Nachdem wir der Klasse einen Namen gegeben haben, werden wir die Klammern der Klasse öffnen. Zunächst geben wir der Schaltfläche einen Zeiger -Cursor, damit sich der Cursor beim Klicken ändert. Dann werden wir einige Polsterung (in Pixel) hinzufügen, um die Position der Schaltfläche auf der Seite zu ändern. Zuletzt werden wir die Hintergrundfarbe der Schaltfläche festlegen. Anschließend wird die Box-Shadow-Eigenschaft mit dem Wert verwendet, der aus Pixelformat für das Schatten- und RGBA-Format für die Farbe des Schattens besteht. Wir werden es auch ausrichten, um es auszurichten.
Nach dem Schließen der Klammern der Klasse werden wir eine andere Funktion für diese Klasse kategorisieren.Wir werden die Transformationsskala und die Änderungen im Schatten des Randes in demselben Format angeben, das wir in der vorherigen Eigenschaft verwendet haben. Danach öffnen wir das Körpermarke und fügen ihm eine Überschrift und einen Knopf hinzu. In unserem Button -Tag deklarieren wir den Namen der Klasse, den wir gerade im Style -Tag im Header unserer Datei integriert haben.
Wir sehen.
Beispiel 03: Verwenden Sie CSS, um die Farbe der Schaltfläche zu verwandeln, nachdem Sie darauf geklickt haben
In diesem Beispiel werden wir die Farbe einer Schaltfläche ändern, wenn sie geklickt wird. Wir werden CSS in diesem Beispiel verwenden und das gesamte Styling wird im Style -Tag für das Button -Element definiert.
Im obigen Skript werden wir im Header der Datei ein Style -Tag öffnen. Dann definieren wir die Styling -Eigenschaften für die Standardtaste, die die Hypertext -Markup -Sprache bietet. Im Style -Tag werden wir zunächst die Schaltfläche gelbe Hintergrundfarbe geben. Danach werden wir die Schaltflächenklasse mit der Focus -Übergangseigenschaft und in seiner Klammung anrufen. Wir werden die Hintergrundfarbe definieren, die sich von der zuvor definierten Hintergrundfarbe unterscheidet. Dies führt zu einer Farbänderung, wenn die Schaltfläche angeklickt wird.
Jetzt öffnen wir diese HTML -Datei in unserem Browser und beobachten die Transformation der Schaltfläche.
In diesem Snippet können wir sehen, dass in der Schaltfläche das Styling in der ersten Eigenschaft des Style -Tags definiert ist. Wenn wir darauf klicken, erhalten wir die folgende Ausgabe:
Die Schaltfläche hat sich nach dem Klick verwandelt und die Farbe ist jetzt rot wie in der Schaltflächenfokus -Klammung definiert.
Beispiel 04: Verwenden Sie CSS, um die Form einer Schaltfläche zu ändern, nachdem Sie darauf geklickt haben
Wenn eine Schaltfläche angeklickt wird, werden wir in diesem Beispiel ihre Form ändern. In diesem Beispiel werden wir CSS anwenden. Das gesamte Styling wird im Style -Tag für das Button -Element definiert. Die Button Focus -Eigenschaft, die dazu führt, dass die Form und Farbe der Taste geändert wird.
Wir öffnen ein Style -Tag im Header der Datei und geben die Styling -Eigenschaften für die Standardtaste der Hypertext -Markup -Sprache im obigen Skript an. Im Style-Tag werden wir zunächst den Hintergrund der Schaltfläche rot erstellen und dem Text durch die Eigenschaft Schriftgröße eine Größe zuweisen. Anschließend werden wir die Schaltflächenklasse mit der Focus -Übergangseigenschaft aufrufen und die Hintergrundfarbe definieren. Es wird sich von der zuvor angegebenen Hintergrundfarbe unterscheiden, die lila ist. Dann werden wir die Eigenschaft Grenzradius hinzufügen und ihm einen Wert in Pixel zuweisen. Wenn also die Schaltfläche klickt, ändert sich die Form und die Farbe.
Die obige Ausgabe zeigt den Status der Schaltfläche, bevor sie geklickt wird. Die Schaltfläche hat einen rechteckigen Rand mit einem roten Hintergrund. Wenn wir auf die Schaltfläche klicken, erhalten wir die folgende Ausgabe:
Wir können jetzt die Farbe und Form des Knopfes sehen, da der Rand abgerundete Kanten und den lila Hintergrund hat.
Abschluss
In diesem Artikel haben wir uns mit verschiedenen Beispielen befasst, dass CSS es uns ermöglicht, einen Effekt auf ein Schaltflächenelement der Hypertext -Markup -Sprache zu erzeugen, wenn er geklickt wird. Wir haben den Style -Tag -Ansatz verwendet, um dem Schaltflächenelement in diesem Artikel CSS hinzuzufügen. Wir haben uns auf die Transformation von Farbe, Form und Schatten der Schaltfläche konzentriert und der Schaltfläche sogar einige Animationen hinzugefügt, wenn sie geklickt werden. Wir haben die Notepad ++ IDE verwendet, um diese Beispiele in diesem Artikel zu implementieren.