Appointment Icon

CSS Tricks Gradient Buttons Tutorial

Web Entwicklung

In diesem Artikel zeige ich euch, wie ihr mit der Hilfe von CSS und JavaScript Buttons mit einem einzigartigen Hover-Effekt erstellt, bei dem der Farbverlauf (Gradient)dem Mauszeiger folgt. Auch für nicht Entwickler geeignet – Mouse-Cursor Tracking leicht gemacht!

Web Entwicklung

CSS Tricks Gradient Buttons Tutorial

Die Basis


Der erste Schritt ist immer der schwerste. Nicht so in diesem Fall. Wir brauchen nur ein paar Zeilen Code, um unsere Grundlage zu schaffen.


HTML


Zuallererst brauchen wir einen HTML-Button. Kommt ziemlich überraschen, oder? :-) Wichtig: Stell sicher, dass du dem Button eine ID zuweist. Andernfalls kannst du den Farbverlauf nicht "on hover" dynamisch anpassen.

<button id="btn">Click here</button>

CSS

Danach müssen wir einige grundlegende CSS-Funktionen ausführen. Zunächst verwenden wir einen :root-Selektor, um einen Fallback für die Mitte unseres Farbverlaufs zu definieren. Dies hat Auswirkungen auf den Ausgangszustand des Buttons. In diesem Beispiel habe ich 0 % für x verwendet. Du kannst natürlich jeden Wert zwischen 0 % und 100 % verwenden.

:root { --x: 0%; }

Geben wir dem Button ein paar Styles. Du kannst hier gerne deine eigenen Styles verwenden. Der wichtigste Teil ist der Farbverlauf, der für den Hintergrund des Buttons verwendet wird. Stell sicher, dass du denselben CSS-Selector verwendest, der auch in deinem :root-Selektor verwendet wird. Andernfalls wird der Fallback nicht funktionieren.

button { height: 50px; min-height: 50px; min-width: 300px; border: none; position: relative; color: white; font-size: 14px; background: linear-gradient( 90deg, rgba(7, 22, 103, 1) 0%, rgba(55, 83, 198, 1) var(--x), rgba(7, 22, 103, 1) 100% ); }

Wichtig: Es ist durchaus von Vorteil, den focus-state des Buttons zu definieren. Andernfalls könnten die Standard-Styles des Browsers einige unschöne Probleme verursachen.

button:focus { outline: none; }

Funktion hinzufügen

Und das ist der springende Punkt. Bis zu diesem Punkt haben wir nur einen linearen Farbverlauf mit drei Punkten. Um den Mittelpunkt des Gradients dynamisch zu ändern, müssen wir ein paar Zeilen JavaScript verwenden.


Zur Erinnerung: Unser Ziel ist es, den Mittelpunkt in Bezug auf die Position des Cursors beim Hovern auszurichten.

JavaScript

Das Wichtigste zuerst. Wir deklarieren eine Variable für unseren Button, indem wir die ID des Elements verwenden.

let btn = document.getElementById("btn");

Bei einer Mausbewegung wollen wir die Position des Cursors im Verhältnis zu den Abmessungen des Buttons berechnen und so den Wert von x ändern. Es ist wichtig, die Funktion onmousemove statt onmouseover neu zu starten. Andernfalls bleibt der Mittelpunkt des Farbverlaufs an der ersten Position hängen, an der der Cursor in den Button eintritt.


Im nächsten Schritt deklarieren wir rect als Größe und relative Position des Buttons in Bezug auf den Viewport.
Die Eigenschaft clientX gibt die horizontale Koordinate innerhalb des Ansichtsfensters an. Durch Subtraktion der horizontalen Koordinate von der linken Position der Border-Box des Buttons erhalten wir die gewünschte Position des Mittelpunkts des Farbverlaufs.


Jetzt müssen wir nur noch die Variable x in unser berechnetes Zentrum ändern und px als Einheit hinzufügen.

btn.onmousemove = function (e) { let rect = e.target.getBoundingClientRect(); let x = e.clientX - rect.left; btn.style.setProperty("--x", x + "px"); };

Der fertige Button

See the Pen Linear Gradient Button by Yannik (@yanniksturm) on CodePen.

Noch Fragen?

FAQs

Was ist HTML?

HTML steht für "Hypertext Markup Language" und ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente bilden die Grundlage des World Wide Webs und können unter anderem von Webbrowsern dargestellt werden.

Was ist CSS?

CSS steht für "Cascading Style Sheets" und ist eine Stylesheet-Sprache für elektronische Dokumente und bildet zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Webs der heutigen Zeit.

Was ist JavaScript?

JavaScript ist eine Programmiersprache, die zum Realisieren von komplexen Funktionen auf einer Webseite genutzt wird. Immer wenn eine Webseite nicht statische Informationen anzeigt, wie zum Beispiel Liveticker, interaktive Karten oder animierte Elemente, kannst du dir sicher sein, dass JavaScript im Spiel ist. Zusammen mit CSS und HTML bildet JS die drei Kernsprachen des World Wide Webs.

Über den Autor

Yannik Sturm

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Author. Author. Author. Author. Author. Author.
Author. Author. Author. Author. Author. Author.
Author. Author. Author. Author. Author. Author.

Weitere Blogartikel