Die Schaltflächen mit Links auf der Website sind ein wichtiges Designelement, das es Benutzern erleichtert, auf der Website zu navigieren. Das Erstellen von Schaltflächen mit Links kann eine einfache Aufgabe sein, erfordert jedoch einige Kenntnisse der Webentwicklung. In diesem ausführlichen Tutorial erfahren Sie, wie Sie mithilfe von HTML eine Schaltfläche mit einem Link auf einer Website erstellen.
Um eine Schaltfläche mit einem Link auf der Website zu erstellen, benötigen wir ein Element . das ist ein spezielles Tag zum Erstellen von Links. Wir können der Schaltfläche auch Stile mit einem Attribut hinzufügen class oder id, die es uns ermöglicht, ihr Aussehen mit CSS zu steuern.
Im folgenden Beispiel wird das Attribut verwendet href, um den Link festzulegen, zu dem die Schaltfläche beim Klicken navigiert. Wert des Attributs class wird verwendet, um einer Schaltfläche einen Stil hinzuzufügen, den Sie in einer CSS-Datei anpassen können. Zum Beispiel kann die "button" -Klasse wie folgt definiert werden:
Stilbeispiel:.button
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
>
Mit CSS-Stilen können wir die Hintergrundfarbe der Schaltfläche, die Textfarbe, die Einrückung und vieles mehr ändern. Sie können die Stile so anpassen, dass sie Ihren Bedürfnissen und Ihrem Website-Design entsprechen.
Schritt 1: Erstellen eines HTML-Schaltflächenelements
In diesem Beispiel haben wir eine Schaltfläche mit dem Text "Klick mich!".
Ohne die Implementierung des Links führt diese Schaltfläche jedoch nicht die erforderliche Aktion aus. Um einen Verweis hinzuzufügen, verwenden Sie ein Attribut . Zum Beispiel:
In diesem Beispiel haben wir eine Schaltfläche erstellt, die den Benutzer auf einen Link umleitet "https://www.example.com " wenn Sie darauf klicken.
Schritt 2: Anpassen des Aussehens der Schaltfläche mit CSS
Nachdem Sie den Link definiert haben, müssen Sie das Aussehen der Schaltfläche mithilfe von CSS anpassen. Mit CSS können Sie verschiedene Stile für eine Schaltfläche festlegen, z. B. Hintergrundfarbe, Schriftart, Rahmen und vieles mehr.
Um zu beginnen, erstellen wir einen Stil für die Schaltfläche, den wir "button" nennen. Dazu verwenden wir den folgenden CSS-Code:
padding: 10px 20px;
In diesem Code legen wir die folgenden Stile für die Schaltfläche fest:
- background-color: #4CAF50; - setzt die grüne Hintergrundfarbe der Schaltfläche
- color: white; - Legt die weiße Farbe des Textes auf der Schaltfläche fest
- padding: 10px 20px; - legt die Einrückung innerhalb der Taste fest
- text-align: center; - richtet den Text in der Mitte der Schaltfläche aus
- text-decoration: none; - Entfernt den Unterstrich des Links
- display: inline-block; - Legt den Blocktyp der Schaltfläche fest
- font-size: 16px; - legt die Schriftgröße der Schaltfläche fest
- margin: 4px 2px; - legt die Einrückung um die Schaltfläche fest
- cursor: pointer; - Ändert die Art des Cursors, wenn Sie über eine Schaltfläche schweben
- border-radius: 4px; - fügt die abgerundeten Ecken der Schaltfläche hinzu
Nachdem Sie den "button" -Stil erstellt haben, wenden Sie ihn auf Ihre Schaltfläche an, indem Sie dem HTML-Code der Schaltfläche ein class-Attribut hinzufügen:
Jetzt wird Ihre Schaltfläche mit einem angepassten Erscheinungsbild angezeigt. Sie können die Werte der Stile ändern, um die gewünschte Schaltflächenansicht zu erreichen.
Schritt 3: Hinzufügen eines Site-Links zu einer Schaltfläche
Nun, da wir eine Schaltfläche haben, fügen wir einen Link zu Ihrer Website hinzu. Hier werden wir das Attribut verwenden href legt die URL fest, zu der die Schaltfläche beim Klicken navigieren soll.
Hier ist ein Beispielcode:
In diesem Beispiel wickeln wir die Schaltfläche in ein Tag ein das ist ein Referenzelement. Wir legen den Wert des Attributs fest href in "https://www.example.com " Das ist die URL Ihrer Website.
Wenn der Benutzer nun auf eine Schaltfläche klickt, wird er zu Ihrer Website weitergeleitet.
Schritt 4: Testen der Schaltfläche mit einem Link auf der Website
Nachdem alle vorherigen Schritte abgeschlossen sind, können wir mit dem Testen der erstellten Schaltfläche mit einem Link zur Website beginnen. Zum Testen öffnen Sie Ihren Webbrowser und navigieren Sie zu der Seite, auf der die Schaltfläche gehostet wird.
Klicken Sie auf die Schaltfläche mit dem Link und überprüfen Sie, ob dieser zur Zielwebsite führt. Stellen Sie sicher, dass Sie einen Browser installiert haben, der das Öffnen von Links unterstützt. Wenn die Schaltfläche mit dem Link funktioniert, haben Sie die Schaltfläche mit dem Link zur Website erfolgreich erstellt.
Stellen Sie außerdem sicher, dass die Schaltfläche auf der Seite korrekt angezeigt wird. Überprüfen Sie, ob die Schaltfläche bei unterschiedlichen Bildschirmauflösungen und auf verschiedenen Geräten einwandfrei funktioniert.
Wenn die Schaltflächenprobleme auf Stile oder Erscheinungsbilder verweisen, stellen Sie sicher, dass Sie die Schaltflächenstile richtig konfiguriert haben. Stellen Sie sicher, dass Sie alle erforderlichen CSS-Regeln anwenden, um die Schaltfläche korrekt anzuzeigen.
Stellen Sie nach Abschluss des Tests sicher, dass die Schaltfläche mit dem Link korrekt funktioniert und Ihren Erwartungen entspricht. Wenn dies der Fall ist, können Sie sicher sein, dass eine Schaltfläche mit einem Link zur Website erfolgreich erstellt wurde.
