In HTML -Dokumenten kann der Benutzer verschiedene Elemente wie Tabellen, Formulare, Textfelder, Bilder und Schaltflächen verwenden. Die Schaltflächen auf Webseiten werden verwendet, um eine Aktion durchzuführen oder ein Ereignis auf einer Schaltfläche zu erstellen. Klicken Sie auf eine Schaltfläche. Es kann auch verwendet werden, um zu jeder anderen Webseite zu fordern. Entwickler betten Schaltflächen auf Webseiten in verschiedenen Stilen und Formen ein.

Dieses Tutorial zeigt:

• So erstellen/erstellen Sie eine Schaltfläche in HTML?
• So erstellen/erstellen Sie eine Kreisschaltfläche mit CSS -Eigenschaften?

So erstellen/erstellen Sie eine Schaltfläche in HTML?

Wenn der Benutzer in HTML eine Schaltfläche erstellen möchte, probieren Sie die angegebenen Anweisungen aus.

Schritt 1: Erstellen Sie einen DIV -Behälter

Verwenden Sie zuerst die “Element zum Erstellen eines Div -Containers. Fügen Sie auch eine hinzu “Ausweis”Attribut mit einem bestimmten Wert entsprechend Ihren Vorlieben.

Schritt 2: Überschrift einfügen

Führen Sie als nächstes eine Überschrift von Level One mit der “ein

" Element. Dann den Übergangstext zwischen den “einbetten

" Stichworte.

Schritt 3: Schaltfläche erstellen

Erstellen Sie eine Schaltfläche in HTML, indem Sie die „verwenden“"Tag zusammen mit dem"Typ”Attribut als“einreichen”:

CSS Circle -Taste

Einreichen

Es kann beobachtet werden, dass die Schaltfläche erfolgreich erstellt wurde:

Bewegen Sie sich nun in den nächsten Abschnitt, um die Schaltfläche kreisförmig zu machen.

So erstellen/erstellen Sie eine Kreisschaltfläche mit CSS -Eigenschaften?

Der "GrenzradiusEigenschaft wird verwendet, um den Knopf in Form eines Kreises zu erstellen. Diese Eigenschaft stellt die Element -Ecken von jeder Seite rund um.

Schauen Sie sich dazu die angegebene Schritt-für-Schritt-Prozedur an.

Schritt 1: Stil „Div“ -Stil -Behälter

Erstens zu "auf die" zu "div"Container mit dem Klassennamen"#Circle-Btn”Und wenden Sie die folgenden CSS -Eigenschaften zum Styling an:

#Circle-Btn
Höhe: 200px;
Breite: 200px;
Rand: 50px;
Polsterung: 80px;
Grenze: 3px fester RGB (23, 8, 228);
Hintergrundfarbe: Blanchedalmond;

Hier:

• Der "HöheDie Eigenschaft wird verwendet, um die Höhe des Elements anzugeben.
• “Breite”Definiert die Elementgröße horizontal.
• “Rand”Wird verwendet, um den Raum außerhalb der definierten Grenze zuzuweisen.
• “PolsterungGibt den Raum innerhalb der Grenze an.
• “Grenze”Verteilt eine Grenze um das Element.
• “HintergrundfarbeEigenschaft wird verwendet, um die Farbe am Hintern des Elements anzugeben.

Ausgang

Schritt 2: Machen Sie die Kreisschaltfläche

Greifen Sie nun mit dem Tag -Namen auf die Schaltfläche zu und wenden Sie die angegebenen Eigenschaften auf der Schaltfläche an, um sie kreisförmig zu gestalten:

Taste
Bildschirmsperre;
Höhe: 150px;
Breite: 150px;
Grenzradius: 50%;
Grenze: 1px solide Rot;

Die Beschreibung des obigen Codes lautet wie folgt:

• Der "AnzeigeDie CSS -Eigenschaft wird verwendet, um das Anzeigeverhalten des Elements anzugeben, z. B. ob das Element ein Block oder eine Inline ist.
• “GrenzradiusDie Eigenschaft wird zum Einstellen der Elementkanten von allen Seiten verwendet. In unserem Szenario wird der Wert dieser Eigenschaft als "festgelegt" festgelegt "50%”Um den Knopf von allen Seiten rund zu machen.

Es ist zu bemerken, dass die Kreisschaltfläche erfolgreich erstellt wurde:

Schritt 3: Wenden Sie auf die Schaltfläche „Schwebewirkung“ an

Wende an "schwebenPseudo -Klasse, um den Schwebeffekt auf die Taste hinzuzufügen:

Taste: Hover
Farbe: RGB (247, 274, 248);
Hintergrundfarbe: CadetBlue;

Auf der "Taste: Schwebe", Die CSS -Eigenschaft"Hintergrundfarbe”Wird verwendet, um die Farbe des Hintergrunds festzulegen und“Farbe”Wird verwendet, um die Textfarbe anzugeben.

Ausgang

Sie haben die Methode zum Erstellen einer Kreisschaltfläche in CSS gelernt.

Abschluss

Erstellen Sie zunächst eine einfache Schaltfläche, um eine Kreisschaltfläche in CSS zu erstellen, indem Sie die “verwenden”Tag in HTML. Dann wenden Sie die “an“GrenzradiusEigenschaft, die die Kanten des Elements von allen Seiten rund setzt. Der Wert des „Grenzradius“ wird als "angegeben"50%”Um den kreisförmigen Knopf zu erstellen. Dieser Beitrag hat das Verfahren für die Erstellung der Kreisschaltfläche in CSS erklärt.