Die Webentwicklung ist untrennbar mit der Erstellung interaktiver Benutzeroberflächenelemente verbunden. Runde Knöpfe mit Verlaufseffekt sind eine der beliebtesten und effektivsten Techniken, die der Website ein modernes und stilvolles Aussehen verleihen. Wenn Sie lernen möchten, wie man solche Schaltflächen auf Ihrer Website erstellt und gestaltet, dann ist unser ausführlicher Leitfaden nützlich für Sie.
Zunächst benötigen Sie Kenntnisse über die Grundlagen von HTML und CSS. Sie müssen der Struktur eines HTML-Dokuments ein Element hinzufügen , die Ihre runde Schaltfläche darstellen wird. Um einen Verlaufseffekt in CSS zu erstellen, können Sie die Eigenschaft verwenden background-image und geben Sie den gewünschten Farbverlauf mithilfe der Funktion an linear-gradient().
Mit CSS können Sie auch die Form der Schaltfläche mithilfe der Eigenschaft festlegen border-radius. Wenn Sie einen Radius festlegen, der der Hälfte der Höhe des Knopfes entspricht, machen Sie ihn rund. Sie können auch die Farbe des Schaltflächenrahmens mithilfe der Eigenschaft festlegen border-color und die Schriftgröße mit der Eigenschaft font-size. Es ist wichtig sich daran zu erinnern, dass die runden Tasten ausreichend groß sein müssen, damit sie bequem gedrückt werden können.
Fügen Sie diesen Code in Ihre HTML-Datei ein und gestalten Sie die Schaltfläche nach Ihren Wünschen, indem Sie die gewünschten Farbverläufe, Farben und Größen hinzufügen:
Wie erstelle ich eine runde Schaltfläche in HTML
Um eine runde Schaltfläche in HTML zu erstellen, können Sie die CSS-Eigenschaft border-radius verwenden, mit der Sie den Radius der abgerundeten Ecken eines Elements festlegen können.
Hier ist ein Beispielcode, der eine runde Schaltfläche erstellt:
Um die runde Form der Schaltfläche festzulegen, fügen Sie der Klasse einen CSS-Stil hinzu .round-button:
.round-buttonNach der Anwendung des Stils wird die Schaltfläche eine runde Form haben. Sie können die Größe der Schaltfläche ändern, indem Sie die Werte der Eigenschaften width und height ändern. Es ist auch möglich, andere Stile hinzuzufügen, damit die Schaltfläche attraktiver aussieht.
So können Sie einem runden Knopf einen Farbverlaufseffekt hinzufügen:
.round-buttonIn diesem Beispiel wird die background-Eigenschaft mit dem Wert linear-gradient verwendet, die einen Farbverlaufseffekt auf der Schaltfläche erzeugt. Weitere Stile wurden ebenfalls hinzugefügt, z. B. Textfarbe, Schriftgröße, kein Rahmen und Ändern des Cursors, wenn Sie über eine Schaltfläche schweben.
Auf diese Weise können Sie mit CSS und HTML einfach eine runde Schaltfläche mit einem Verlaufseffekt erstellen. Dies kann nützlich sein, wenn Sie interaktive Elemente auf einer Webseite erstellen.
Erstellen einer Schaltflächenbasis
Um eine runde Schaltfläche in HTML zu erstellen, müssen wir ein Element verwenden. Zuerst erstellen wir eine Tabelle mit einer Zelle, in die wir dieses Element einfügen:
Jetzt wird unsere Schaltfläche als normales Rechteck angezeigt, aber um eine runde Form zu erstellen, können Sie CSS-Stile hinzufügen.
Festlegen von Schaltflächenstilen
Nachdem Sie ein Schaltflächenelement in HTML erstellt haben, können Sie mit dem Festlegen von Stilen für das Schaltflächenelement beginnen. Stile können mit Inline-Stilen, externen Stildateien oder Inline-Stilen definiert werden.
Um zu beginnen, legen wir die grundlegenden Stile für die Schaltfläche fest, z. B. Größe, Schriftart und Hintergrundfarbe. Verwenden Sie dazu die CSS-Eigenschaften:
.button
Im obigen Code legen wir die folgenden Eigenschaften fest:
- width: 150px; - Legt die Breite der Schaltfläche auf 150 Pixel fest
- height: 50px; - Legt die Höhe der Schaltfläche auf 50 Pixel fest
- font-family: Arial, sans-serif; - Legt die Schriftart der Schaltfläche, Arial oder eine alternative Schriftart fest, wenn Arial nicht verfügbar ist
- font-size: 16px; - legt die Schriftgröße der Schaltfläche auf 16 Pixel fest
- color: #fff; - Legt die Farbe des Schaltflächentextes auf Weiß fest
Sie können nun Stile für den Hintergrund der Schaltfläche mit einem Verlaufseffekt hinzufügen:
.button
Der obige Code verwendet die background-Eigenschaft, um den Hintergrund der Schaltfläche festzulegen. Der Wert linear-gradient bedeutet, dass ein Farbverlauf erstellt wird. Wir geben die Richtung des Farbverlaufs an (to right - der Farbverlauf geht vom linken Rand des Elements nach rechts) und geben auch die Farben des Farbverlaufs an (#ff9a9e und #fad0c4).
Die Schaltfläche hat jetzt einen Hintergrund mit einem Verlaufseffekt, der sich von einer Farbe zur anderen vom linken Rand der Schaltfläche zum rechten ändert.
Hinzufügen von Text zu einer Schaltfläche
Sie können das Tag auch verwenden, um den Haupttext auf einer Schaltfläche hervorzuheben, und das Tag, um einen Akzent oder einen Unterstrich hervorzuheben.
Durch die Verwendung dieser Tags und die Kombination mit den entsprechenden Stilen können Sie dem runden Knopf einfach Text hinzufügen und ihn ausdrucksstark und lesbar machen.
Anpassen des Verlaufseffekts
Mit dem Verlaufseffekt können Sie einen sanften Übergang von einer Farbe zur nächsten auf einer Schaltfläche erstellen und ihr Stil und Attraktivität verleihen.
Sie können die Eigenschaft background-image oder den Hintergrund des Farbverlaufs verwenden, um den Farbverlaufseffekt in HTML anzupassen. Mit dieser Eigenschaft können Sie den Hintergrundverlauf eines Elements definieren.
Die Gradientensyntax kann mit den linear-gradient- oder radial-gradient-Funktionen angegeben werden. Mit linear-gradient wird ein linearer Farbverlauf definiert, der von einem Punkt zum anderen verläuft. Mit Radial-gradient wird ein radialer Gradienten definiert, der von der Mitte ausgeht und sich in alle Richtungen ausbreitet.
Beispiel für einen Verlaufseffekt für eine runde Schaltfläche:
Im obigen Beispiel wird ein linearer Farbverlauf verwendet, der von der oberen linken Ecke zur unteren rechten Ecke der Schaltfläche verläuft. Die Farbverlaufsfarben werden im Hexadezimalsystem (#FF9900 und #FF0000) festgelegt.
Neben linear-gradient können Sie auch andere Werte zum Anpassen des Farbverlaufs verwenden, z. B. Winkel (to right, to left, to top, to bottom), Farben und deren Verteilung.
Ändern der Farbe einer Schaltfläche
Die Farbe des Knopfes kann ein effektives und attraktives Design erzeugen. In HTML können Sie die Farbe einer Schaltfläche leicht ändern, indem Sie die Attribute style und background-color verwenden.
Um die Farbe der Schaltfläche zu ändern, müssen Sie die gewünschte Farbe im Hex-Code-Format oder im Farbnamen angeben. Um den hexadezimalen Code zu verwenden, müssen Sie den Wert des Attributs background-color auf #code setzen (z. B. #FF0000 für Rot).
Wenn Sie einen Farbnamen verwenden möchten, müssen Sie ihn direkt im Attribut background-color angeben (z. B. red für Rot).
Diese Beispiele zeigen nur Methoden zum Ändern der Farbe einer ganzen Schaltfläche. Wenn Sie einen Farbverlaufseffekt auf eine Schaltfläche festlegen möchten, müssen Sie CSS verwenden und ein background-image mit linear-gradient festlegen. Darüber hinaus können Sie andere Stile wie Rahmen, Radius der grafischen Schaltfläche, Ändern der Textfarbe der Schaltfläche und andere hinzufügen, um ein noch attraktiveres Button-Design zu erstellen.
Die Verwendung von Farbe in der Gestaltung der Schaltfläche hilft Ihnen, sie unter anderen Elementen auf der Seite hervorzuheben und sie sichtbarer und attraktiver zu machen.
Reaktionsfähigkeit für die Schaltfläche
Um die Schaltfläche reaktionsfähiger zu machen, können Sie verschiedene CSS-Techniken und -Eigenschaften verwenden.
Der erste Schritt besteht darin, das Erscheinungsbild einer Schaltfläche zu ändern, wenn Sie den Mauszeiger darüber bewegen. Dazu können wir eine Pseudoklasse verwenden :hover. Sie können beispielsweise die Hintergrundfarbe einer Schaltfläche ändern oder eine kleine Animation hinzufügen.
.button .button:hoverIn diesem Beispiel ändert sich die Hintergrundfarbe, wenn Sie über die Schaltfläche schweben, von hellem Blau in dunkler.
Eine weitere Möglichkeit, eine Schaltfläche reaktionsfähig zu machen, besteht darin, ihren Status beim Klicken zu ändern. Dazu können Sie eine Pseudoklasse verwenden :active. Sie können beispielsweise die Hintergrundfarbe einer Schaltfläche ändern oder eine kleine Animation hinzufügen, um visuell anzuzeigen, dass die Schaltfläche angeklickt wurde.
.button:activeIn diesem Beispiel wird ein kleiner Schatten angezeigt, wenn Sie auf die Schaltfläche klicken, um einen Klick-Effekt zu erzeugen.
Sie können auch Übergangseffekte hinzufügen, wenn Sie den Status einer Schaltfläche mithilfe einer Eigenschaft ändern transition. Zum Beispiel können wir die Hintergrundfarbe einer Schaltfläche reibungslos ändern, wenn Sie den Mauszeiger darüber bewegen.
In diesem Beispiel ändert sich die Hintergrundfarbe, wenn Sie über eine Schaltfläche schweben, innerhalb von 0,3 Sekunden reibungslos.
Mit diesen Techniken können Sie einer Schaltfläche mehr Reaktionsfähigkeit verleihen und die Benutzer visuell auf ihren Zustand aufmerksam machen.
Hinzufügen zusätzlicher Effekte
Zusätzlich zum Verlaufseffekt können Sie zusätzliche Effekte hinzufügen, um bunte und attraktive runde Schaltflächen zu erstellen.
Ein solcher Effekt ist der Schatten. Durch das Hinzufügen eines Schattens zu einer Schaltfläche wird ein Eindruck von Volumen und Tiefe vermittelt. Sie können die box-shadow-Eigenschaft verwenden, mit der Sie die Schattenoptionen festlegen können: horizontaler und vertikaler Versatz, Unschärfenradius und Farbe.
Beispielcode zum Hinzufügen eines Schattens zu einer runden Schaltfläche:
Ein weiterer Effekt, der einer Schaltfläche hinzugefügt werden kann, ist der Hover-Effekt. Wenn Sie den Mauszeiger über eine Schaltfläche bewegen, können Sie die Farbe, den Unschärfenradius des Schattens oder die Schriftgröße ändern. Dazu werden die Pseudoklassen :hover oder :active verwendet.
Beispielcode zum Hinzufügen eines Hovereffekts zu einer runden Schaltfläche:
Das Hinzufügen zusätzlicher Effekte wie Schatten und Hover-Effekt ermöglicht es Ihnen, bunte und attraktive runde Schaltflächen zu erstellen.
Anpassen der Größe und Form der Schaltfläche
Um eine runde Schaltfläche mit Verlaufseffekt in HTML zu erstellen, müssen Sie die Größe und Form der Schaltfläche festlegen. Dies kann mit CSS-Eigenschaften erfolgen.
Sie können Eigenschaften verwenden, um die Größe einer Schaltfläche zu bestimmen width und height. Legen Sie den Wert dieser Eigenschaften mithilfe von CSS fest. Zum Beispiel:
.buttonUm eine runde Form einer Schaltfläche zu erstellen, müssen Sie den Verrundungsradius mithilfe der Eigenschaft festlegen border-radius. Legen Sie den Wert dieser Eigenschaft auf die Hälfte der Höhe oder Breite der Schaltfläche fest, um eine runde Form zu erhalten. Zum Beispiel:
.buttonJetzt haben Sie einen runden Knopf mit einer bestimmten Größe und Form. Als nächstes können Sie einen Farbverlaufseffekt und andere Stile hinzufügen, um die Schaltfläche attraktiver zu machen.
