So erstellen Sie eine HTML -Schaltfläche, die wie ein Link wirkt

In HTML führt die Schaltflächenkomponente bestimmte Aktivitäten aus, z. Darüber hinaus können Benutzer mit Hilfe von CSS die Knopfgröße, Form, Farbe, Breite, Höhe und viele andere Aspekte ändern. Die Taste kann mit mehreren Eigenschaften entsprechend dem Bedarf ausgelegt werden.

In diesem Blog wird die Anweisungen zum Erstellen einer HTML -Schaltfläche demonstriert, die wie ein Link wirkt.

So erstellen Sie eine HTML -Schaltfläche, die wie ein Link wirkt?

Schauen Sie sich das unten erwähnte Verfahren zum Erstellen einer HTML-Link-Taste an.

Schritt 1: Erstellen Sie eine DIV

Erstellen Sie im Haupt -HTML -Körper einen Div -Container und geben Sie den Klassennamen als “anBtn-Area”.

Schritt 2: Link für die Schaltfläche erstellen

Als nächstes definieren Sie die “A”Tag und die“hrefElement, das die Ziel -URL angibt, in der der Benutzer nach dem Klicken auf die Schaltfläche navigiert wird.

Schritt 3: Schaltflächenklasse zuweisen

Erstellen Sie nun eine Schaltfläche und geben Sie seine Klasse an. Definieren Sie beispielsweise die Schaltflächenklasse als “Link-Button"Und fügen Sie den Text zwischen" hinzu "Taste"Tags, wie wir hinzugefügt haben"Besuchen Sie LinuxHint”.

Schließen Sie nach dem Einstellen der Schaltfläche die “" Und "" Stichworte.

Hier ist der Codeblock für das besprochene Szenario:

Besuchen Sie LinuxHint

Gehen Sie nun den Knopf zum Styling.

So stylen Sie einen Knopf mit CSS, der wie ein Link wirkt?

Überprüfen Sie die angegebenen Anweisungen, um eine Taste mit CSS zu stylen, die wie ein Link wirkt, die angegebenen Anweisungen.

Schritt 1: Style Link-Button

Stylen Sie die Schaltfläche, indem Sie die folgenden Attribute in der “definierenLink-Button" Klasse:

• • Der "Hintergrundfarbe"Eigenschaft wird verwendet, um die Farbe als" als "anzugeben"Bisque”.
  • Polsterung als "festlegen"10px”, Das zum Einstellen des Zellabstands verwendet wird.
  • Der Grenzradius wird als "festgelegt"8px”Um die Ecken der äußeren Grenze des Elements abzurunden.
  • Der Box-Shadow wird als "eingestellt"1px, 2px, 1px, 2px"Mit der Farbe"grau”.
  • Setzen Sie die Margin -Eigenschaft als “5px ” Für den Abstand von Ober- und Knopf und “100px”Für den rechten und linken Abstand.
  • Die Grenze wird als "festgelegt"1PX Solid #CE7777”:

.Link-Button
Hintergrundfarbe: Bisque;
Polsterung: 10px;
Border-Radius: 8px;
Box-Shadow: 1PX 2px 1px 2px grau;
Rand: 5px 100px;
Grenze: 1PX Solid #CE7777;

Schritt 2: Schaltfläche Breite einstellen

“.Btn-Area"Die Klasse wird verwendet, um auf den Div -Container zuzugreifen, der die Schaltflächenbreite als" festlegen "500pxUnd Margin -Eigenschaft als "Auto”, Der den Rand automatisch um den Knopfbereich anpasst:

.btn-area
Breite: 500px;
Rand: Auto;

Es kann beobachtet werden, dass der Knopf erfolgreich gestaltet wurde:

Wir haben die Methode zum Erstellen und Styling der HTML -Taste erklärt, die wie ein Link wirkt.

Abschluss

Um eine HTML -Schaltfläche zu erstellen, die wie ein Link wirkt, erstellen Sie zunächst einen Div -Container und geben Sie die Klasse mit dem Namen an. Als nächstes definieren Sie die “"Tag zusammen mit dem"href”Attribut, um den Link einzubetten. Erstellen Sie dann eine Schaltfläche und weisen Sie die Schaltflächenklasse und den Namen zu. Stylen Sie danach die Link -Taste, indem Sie CSS -Eigenschaften auf die definierten Klassen anwenden. Dieser Beitrag hat den einfachsten Ansatz zum Erstellen einer HTML -Taste gezeigt, die wie ein Link wirkt.