Farbverlauf-Schaltflächen sie sind zu einem beliebten Element im Interface-Design geworden und ziehen die Aufmerksamkeit der Benutzer mit ihren glatten Farbübergängen auf sich. Sie fügen Websites Einzigartigkeit und Stil hinzu, und das Wissen, wie man einen solchen Effekt erzeugt, ist für Webentwickler von Vorteil.
In diesem Artikel erfahren Sie, wie Sie eine Schaltfläche mit CSS zu einem Farbverlauf machen.
Um eine Farbverlaufsschaltfläche zu erstellen, müssen Sie die Eigenschaft verwenden background mit linear-gradient. Ein linearer Farbverlauf ermöglicht einen reibungslosen Farbübergang von einem Wert zum anderen.
Gradient-Schaltfläche in CSS: einfache Anleitung
Die Farbverlaufsschaltflächen können einer Webseite einen interessanten visuellen Effekt verleihen und ihr ein stilvolles Aussehen verleihen. In diesem Tutorial werden wir uns ansehen, wie man eine solche Schaltfläche mit CSS erstellt.
Erstellen Sie zunächst eine einfache HTML-Struktur für die Schaltfläche:
In CSS können wir die background-Eigenschaft verwenden, um den Hintergrundverlauf einer Schaltfläche festzulegen. Dazu können wir die Funktion linear-gradient verwenden:
.gradient-button
background: linear-gradient(to right, #FFA500, #FF4500);
color: #ffffff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
Im obigen Beispiel haben wir die Funktion linear-gradient verwendet, um den Farbverlauf von der Farbe #FFA500 zur Farbe #FF4500 festzulegen. Sie können auch die Richtung des Farbverlaufs anpassen, indem Sie den Wert des Arguments to right ändern.
Dann geben wir die Farbe des Textes auf der Schaltfläche mit der color-Eigenschaft an. In diesem Fall haben wir #ffffff verwendet, um die weiße Farbe des Textes festzulegen.
Die border:none-Eigenschaft entfernt den Rahmen an der Schaltfläche, und die padding-Eigenschaft legt die Einrückung um den Text innerhalb der Schaltfläche fest.
Mit der Border-radius-Eigenschaft legen wir die Abrundung der Ecken der Schaltfläche fest, wodurch ihre Form attraktiver wird.
Schließlich ist die cursor-Eigenschaft:pointer legt die Form des Cursors fest, wenn Sie auf eine Schaltfläche zeigen, in Form eines Pfeils, der darauf hinweist, dass ein Klick möglich ist.
Nachdem Sie all diese Stile angewendet haben, stellt Ihre Schaltfläche ein attraktives Farbverlaufselement der Webseite dar, das Sie verwenden können.
Schritt 1: Erstellen Sie HTML-Markup
Zunächst erstellen wir eine Schaltfläche im HTML-Markup, die wir mit einem CSS-Farbverlauf stylen werden. Verwenden Sie dazu das Tag und geben Sie ihm den Text ein, der auf der Schaltfläche angezeigt wird.
Hier ist ein Beispielcode:
Sie können den Text der Schaltfläche nach Belieben ändern.
Schritt 2: Wenden Sie Stile mithilfe von CSS auf eine Schaltfläche an
Jetzt, da wir eine Schaltfläche im Markup haben, fügen wir Stile mit CSS hinzu, um sie in eine Farbverlaufsschaltfläche umzuwandeln.
In CSS verwenden wir die Eigenschaft background, um einen Farbverlaufshintergrund für die Schaltfläche festzulegen. Wir können einen linearen Farbverlauf verwenden, der mit der Funktion erstellt wird linear-gradient(). Diese Funktion akzeptiert zwei Parameter: die Richtung des Farbverlaufs und eine Reihe von Farben.
Zum Beispiel können wir einen von oben nach unten verlaufenden Farbverlauf von Weiß nach Schwarz wie folgt erstellen:
.buttonDieser Farbverlauf verläuft vom oberen Punkt der Schaltfläche zum unteren Punkt, beginnend mit der weißen Farbe und endet mit der schwarzen Farbe.
Wir können diesen Farbverlauf jedoch anpassen, indem wir mehr Farben hinzufügen. Zum Beispiel können wir einen Farbverlauf erstellen, der aus weißen, grauen und schwarzen Farben besteht:
.buttonDer Farbverlauf verläuft nun vom oberen Punkt der Schaltfläche zum unteren Punkt, beginnend mit der Farbe weiß, dann in Grau und endet mit der Farbe Schwarz.
Neben dem Farbverlauf können wir auch andere Stile wie Textfarbe, Schriftgröße und -stil, Einzug usw. hinzufügen, um das Aussehen der Schaltfläche nach unserem Geschmack anzupassen.
Hier ist ein vollständiges Beispiel für Stile, die auf eine Schaltfläche angewendet werden können:
.buttonSie können diese Stile nach Belieben anpassen, um ein einzigartiges Erscheinungsbild der Farbverlaufsschaltfläche zu erhalten.
Schritt 3: Fügen Sie Animationen für einen helleren Effekt hinzu
Um unsere Schaltfläche noch attraktiver zu machen, können wir Animationen hinzufügen. Dazu verwenden wir in CSS die Eigenschaft transition. Damit können wir die Zeit und den Typ der Animation festlegen.
In diesem Beispiel haben wir eine Animation eingerichtet, um den Hintergrund einer Schaltfläche zu ändern, wenn Sie den Mauszeiger darüber bewegen. Der erste Wert der Eigenschaft transition gibt die zu ändernde Eigenschaft an (in unserem Fall ist dies der Hintergrund), der zweite Wert legt die Zeit fest (0.3s) und der dritte Wert bestimmt den Animationstyp (ease).
Wenn Sie nun den Mauszeiger über eine Schaltfläche bewegen, ändert sich der Hintergrund von einer Farbe zur nächsten, was der Schaltfläche einen zusätzlichen Effekt verleiht.
