HTML ist eine Markupsprache, die zum Erstellen von Webseiten verwendet wird. Eines der wichtigsten Elemente einer Webseite sind die Sprungschaltflächen. Mit Schaltflächen können Benutzer Aktionen ausführen und zu anderen Seiten navigieren. In diesem Artikel werden wir uns ansehen, wie Sie Sprungschaltflächen mit HTML erstellen.
Zuallererst müssen Sie die grundlegenden Tags kennen, die mit der Erstellung von Schaltflächen in HTML verbunden sind. Die wichtigsten Tags sind und .
Mit dem Tag können Sie Schaltflächen erstellen, die bestimmte Aktionen ausführen, z. B. das Senden eines Formulars an einen Server oder das Aufrufen einer Javascript-Funktion. Wenn Sie dieses Tag verwenden, können Sie Text oder andere HTML-Elemente darin platzieren.
Das Tag erstellt Hyperlinks, mit denen Benutzer zu anderen Seiten navigieren können. Wenn Sie dieses Tag innerhalb des Tags verwenden, müssen Sie ein Attribut angeben href mit der Adresse der Seite, zu der Sie navigieren möchten. Sie können auch andere Attribute verwenden, z. B., target, um anzugeben, wie der Link geöffnet werden soll.
Grundlagen zum Erstellen von Schaltflächen in HTML
Um eine Schaltfläche in HTML zu erstellen, wird ein Tag verwendet. Innerhalb dieses Tags können Sie Text oder andere HTML-Elemente einfügen, die auf der Schaltfläche sichtbar sind.
Beispiel zum Erstellen einer Schaltfläche:
-
Erstellen Sie ein Tag und fügen Sie den Schaltflächentext innerhalb des Tags hinzu:
Sie können auch andere Elemente verwenden, z. B. mit dem Attribut "type" gleich "submit" oder "reset", um Schaltflächen zum Senden eines Formulars oder zum Zurücksetzen von Daten zu erstellen.
Um Schaltflächen in HTML zu stylen, können Sie CSS verwenden, mit dem Sie Farbe, Größe, Schriftart, Hintergrund und andere Eigenschaften der Schaltfläche definieren können. Die Schaltflächen können nach dem Design der Website gestylt oder ihnen ein einzigartiges Aussehen verliehen werden.
Im Allgemeinen ist das Erstellen von Schaltflächen in HTML einfach und ermöglicht eine deutlich verbesserte Benutzererfahrung auf der Website. Verwenden Sie die Schaltflächen, um mit den Besuchern Ihrer Website klar und bequem zu interagieren.
Definieren von Schaltflächen in HTML
In HTML sind Schaltflächen interaktive Elemente, mit denen ein Benutzer verschiedene Aktionen auf einer Webseite ausführen kann. Es gibt mehrere Möglichkeiten, Schaltflächen in HTML zu erstellen, und wir werden ausführlicher darüber sprechen.
- Tag verwenden : Mit diesem Tag können Sie eine Schaltfläche mit benutzerdefiniertem Text oder Inhalt erstellen. Wickeln Sie einfach den gewünschten Text oder Inhalt in das öffnende und schließende Tag ein .
- Verwenden eines Tags mit dem Attribut type="button" : Mit diesem Tag können Sie basierend auf dem Wert des value-Attributs eine Schaltfläche mit dem angegebenen Text erstellen. Definieren Sie einfach den Wert des type-Attributs als "button" und geben Sie den gewünschten Schaltflächentext im value-Attribut an.
- Verwenden eines Tags mit CSS-Stilen: Ein Tag, das normalerweise zum Erstellen von Links verwendet wird, kann auch zum Erstellen von Schaltflächen verwendet werden. Fügen Sie einfach die entsprechenden CSS-Stile hinzu, damit die Schaltfläche das Aussehen der Schaltfläche hat.
Alle diese Methoden haben ihre eigenen Eigenschaften und können an verschiedene Bedürfnisse und das Styling der Schaltflächen einer Webseite angepasst werden. Wählen Sie die Option aus, die für Ihr Projekt am besten geeignet ist, und erstellen Sie weiterhin eine benutzerfreundliche und funktionale Benutzeroberfläche.
Stilisieren von Schaltflächen mit CSS
Um zu beginnen, können wir die Hintergrundfarbe der Schaltfläche ändern, einen Rahmen hinzufügen und die Textfarbe ändern. Sie können beispielsweise eine Eigenschaft verwenden background-color um die Hintergrundfarbe festzulegen, geben Sie die Eigenschaft an border um einen Rahmen und eine Eigenschaft zu erstellen color um die Farbe des Textes festzulegen. Zum Beispiel:
.buttonAußerdem können wir die Größe der Schaltfläche ändern, indem wir Werte für die Eigenschaften festlegen width und height. Zum Beispiel:
.buttonOptional können Sie die Eigenschaft verwenden padding so legen Sie die Füllung innerhalb der Schaltfläche und der Eigenschaft fest margin um einen Einzug in Bezug auf andere Elemente auf der Seite zu erstellen.
Beispielsweise können Sie innerhalb einer Schaltfläche 10 Pixel einrücken:
.buttonOder Sie können einen Einzug von 20 Pixeln um die Schaltfläche hinzufügen:
.buttonDarüber hinaus können Sie mit CSS Animationen und Effekte hinzufügen, wenn Sie über eine Schaltfläche schweben oder auf eine Schaltfläche klicken. Sie können beispielsweise die Hintergrundfarbe und die Textfarbe festlegen, wenn Sie über eine Schaltfläche schweben:
.button:hoverSie können auch eine Animation hinzufügen, um die Hintergrundfarbe und die Textfarbe zu ändern, wenn Sie über die Schaltfläche schweben:
.button .button:hoverAuf diese Weise können wir mit CSS die Schaltflächen stilisieren und sie für die Benutzer attraktiver und interaktiver gestalten.
Erstellen von Klicks auf eine Schaltfläche
HTML bietet verschiedene Möglichkeiten zum Erstellen von Klicks auf eine Schaltfläche. Betrachten wir zwei von ihnen: Verwenden eines Attributs onclick und die Verwendung des Tags a mit Attribut href.
1. Verwenden des onclick-Attributs:
Sie können das Attribut verwenden, um einen Klick auf eine Schaltfläche zu erstellen onclick und JavaScript. In diesem Fall ruft die Schaltfläche eine JavaScript-Funktion auf, die die mit dem Übergang verbundene Aktion ausführt.
In diesem Beispiel wird beim Klicken auf eine Schaltfläche ein Link angezeigt https://example.com. Sie können den Link durch den Link ersetzen, den Sie benötigen.
2. Verwenden des a-Tags mit dem href-Attribut:
Eine andere Möglichkeit zum Erstellen von Klicks auf eine Schaltfläche besteht darin, ein Tag zu verwenden a mit Attribut href. In diesem Fall wird die Schaltfläche als Link dargestellt.
In diesem Beispiel sieht die Schaltfläche wie ein Link aus, und wenn Sie darauf klicken, wird ein Link angezeigt https://example.com.
Beachten Sie, dass diese Methoden zum Erstellen von Übergängen zu externen oder internen Seiten verwendet werden können.
Hinzufügen von Bildern zu Schaltflächen
Schaltflächen in HTML können nicht nur Text, sondern auch Bilder enthalten. Dies kann hilfreich sein, um das Aussehen von Schaltflächen zu verbessern und die Benutzererfahrung zu verbessern.
Um ein Bild zu einer Schaltfläche hinzuzufügen, müssen Sie ein Tag verwenden innerhalb des Tags . Im src-Attribut des Tags
sie müssen den Pfad zu dem Bild angeben, das Sie hinzufügen möchten.
In diesem Beispiel wird ein Bild mit dem Pfad "images/button-image" angezeigt.png" wurde der Schaltfläche hinzugefügt. Das Alt-Attribut gibt den alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen wird.
Das Bild kann in verschiedenen Größen und Formaten vorliegen, es wird jedoch empfohlen, weboptimierte Bilder zu verwenden, um die Ladezeit der Seite zu reduzieren.
Jetzt wissen Sie, wie Sie einem Button in HTML ein Bild hinzufügen. Dadurch können Sie ansprechende und interaktive benutzerdefinierte Intefees erstellen.
Hinzufügen von Animationen zu Schaltflächen
Animationen können Ihren Schaltflächen auf einer Webseite Interaktivität und Attraktivität verleihen. Mit CSS können Sie ganz einfach verschiedene Animationseffekte für Schaltflächen erstellen. Hier sind einige Beispiele, wie dies möglich ist:
- Verwenden Sie die transition-Eigenschaft, um glatte Übergänge zwischen Schaltflächenzuständen zu erstellen, z. B. wenn Sie die Hintergrundfarbe oder die Schriftgröße ändern, wenn Sie den Mauszeiger bewegen.
- Verwenden Sie die @keyframes-Eigenschaft, um eine Frame-Animation zu erstellen. Sie können verschiedene Keyframes und die Dauer der Animation definieren, um Effekte wie das Blinken einer Taste oder das Bewegen einer Taste auf dem Bildschirm zu erzeugen.
- Verwenden Sie Pseudoelemente wie ::before und ::after , um der Schaltfläche zusätzliche Elemente hinzuzufügen und sie zu animieren. Sie können beispielsweise eine Animation erstellen, um die Form einer Schaltfläche zu ändern oder ein zusätzliches animiertes Symbol beim Schweben anzuzeigen.
.btn .btn:hover .btn::before .btn:hover::before
In diesem Beispiel haben wir eine einfache Schaltfläche mit dem Übergang der Hintergrundfarbe beim Schweben erstellt. Wir haben auch das Pseudo-Element ::before hinzugefügt, das einen halbtransparenten weißen Hintergrund hat. Dieses Pseudoelement wird mit einem glatten Effekt angezeigt, wenn Sie über die Schaltfläche schweben.
Mit ähnlichen Techniken können Sie einzigartige animierte Schaltflächen auf Ihrer Webseite erstellen und deren Bedeutung für die Benutzer hervorheben.
