Tasten webseiten sind eines der Hauptelemente für die Interaktion des Benutzers mit der Website. Mit Standard-HTML-Schaltflächen können Sie grundlegende Aktionen ausführen, aber ihr Aussehen lässt oft zu wünschen übrig. Mit CSS können wir jedoch einen normalen Link leicht in eine stilvolle und ansprechende Schaltfläche umwandeln. Auf diese Weise können Sie interaktive und benutzerfreundliche Benutzeroberflächen erstellen.
Die Grundidee besteht darin, CSS-Stile zu verwenden, um das Aussehen eines Links zu ändern und ihn in eine Schaltfläche umzuwandeln. Richten Sie die Aufmerksamkeit des Benutzers auf wichtige Elemente in verschiedenen Farben, Größen und Formen. Sie können verschiedene schwebende Effekte und Animationen verwenden, um Ihre Schaltfläche noch attraktiver und interaktiver zu gestalten.
In diesem Artikel werden wir uns einige grundlegende Möglichkeiten ansehen, wie Sie eine Verknüpfung mithilfe von CSS zu einer Schaltfläche machen, damit Sie die für Ihr Projekt am besten geeignete auswählen können.
CSS. Schaltfläche "Link"
class="button" href="#">Click Me Sie können die Button-Klasse mit CSS anpassen, um Farben, Größen, Schriftarten und andere Schaltflächenstile festzulegen.
.button border: 1px solid #000; padding: 10px 20px; background-color: #eaeaea; color: #000; text-decoration: none; font-weight: bold; border-radius: 5px;>.button:hover background-color: #ddd;> Der Link wird nun wie eine stilvolle Schaltfläche mit den angegebenen Stilen aussehen.
Wie erstelle ich eine Link-Schaltfläche?
Das Erstellen einer Linkschaltfläche mit CSS ist sehr einfach. Dazu benötigen wir einige Schritte:
Schritt 1: Erstellen Sie ein Linkelement mit einem Tag :
Schritt 2: Definieren Sie die Stile für die Referenz, damit sie wie eine Schaltfläche aussieht. Dazu können Sie den folgenden CSS-Code verwenden:
Schritt 3: Passen Sie die Stile für die Verknüpfungszustände an, wenn Sie schweben und klicken. Zum Beispiel:
a:hover a:activeJetzt ist Ihr Link zu einer Schaltfläche mit voreingestellten Stilen geworden! Sie können die Farben, Größen und anderen Eigenschaften der Schaltfläche je nach Ihren Bedürfnissen anpassen.
Beachten Sie, dass CSS-Stile zu einer Stylesheet-Datei oder innerhalb eines Tags auf Ihrer HTML-Seite hinzugefügt werden müssen.
Verwenden von Stilen für eine Referenzschaltfläche
Mit CSS können Sie Verknüpfungsschaltflächen mit verschiedenen Stilen und Effekten erstellen. Hier sind einige grundlegende Stile, mit denen Sie eine Referenzschaltfläche stylen können:
- Hintergrundfarbe
- Vordergrundfarbe
- Schriftgröße
- Einrueckungen
- Rahmenstil
- Der Schatten
Um eine Linkschaltfläche mit CSS zu erstellen, können Sie die Pseudoklassen :hover und :active verwenden, um beim Schweben und Klicken auf die Schaltfläche verschiedene Stile hinzuzufügen:
Im obigen Beispiel hat die Linkschaltfläche einen blauen Hintergrund, weißen Text und abgerundete Ecken. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, ändert sich die Hintergrundfarbe in ein dunkleres Blau und die Farbe wird durch Klicken noch dunkler.
Mithilfe von CSS können Sie viele verschiedene Stile von Linkschaltflächen erstellen, um besser auf das Design Ihrer Website zu passen und ihr Aussehen und ihre Funktionalität zu verbessern.
CSS. Erstellen einer stilisierten Verknüpfungsschaltfläche
Mit CSS können Sie eine stilvolle Link-Schaltfläche erstellen, die die Aufmerksamkeit der Benutzer auf sich zieht und das Erscheinungsbild der Webseite verbessert. Dazu können Sie verschiedene CSS-Eigenschaften und -Werte verwenden.
So können Sie eine Link-Schaltfläche mit CSS erstellen:
| Schritt | Die Beschreibung |
|---|---|
| 1 | Erstellen Sie ein Linkelement im HTML-Code mithilfe eines Tags . Zum Beispiel: |
| Der Link | |
| 2 | Erstellen Sie einen Stil für eine Linkschaltfläche in einer CSS-Datei oder in einem Tag innerhalb des HTML-Codes. Zum Beispiel: |
| .button-link |
padding: 10px 20px;
Im obigen Beispiel hat die Linkschaltfläche einen grünen Hintergrund, eine weiße Textfarbe, bestimmte Einrückungen und eine Schriftgröße. Andere Eigenschaften und Werte können verwendet werden, um das gewünschte Erscheinungsbild der Linkschaltfläche zu erreichen.
Wenn Sie nun eine Webseite durchsuchen, sehen Sie eine stilisierte Linkschaltfläche, die sich vom restlichen Inhalt abhebt. Eine solche Link-Schaltfläche kann für verschiedene Zwecke verwendet werden, z. B. zum Aktivieren einer bestimmten Aktion oder zum Navigieren zu einer anderen Seite.
Verwenden von Klassen zum Stylen
Um eine Klasse in CSS zu erstellen, müssen Sie einen Punkt vor dem Klassennamen verwenden, z. B.:
.my-class
Um einem Element in HTML eine Klasse hinzuzufügen, müssen Sie im class-Attribut einen Klassennamen angeben:
Jetzt haben alle Elemente mit der Klasse .my-class die gleichen Stile.
Klassen können nicht nur zum Styling von Schaltflächen verwendet werden, sondern auch für alle anderen Elemente auf einer Webseite, wie Links, Bilder, Überschriften usw.
Wenn Sie beispielsweise eine stilisierte Linkschaltfläche erstellen möchten, können Sie einem Element eine Klasse hinzufügen und ihm Stile in CSS zuweisen:
.my-button
Der Link wird nun wie eine stilisierte Schaltfläche mit einer Hintergrundfarbe, einem Strich, Einrückungen und einer Textfarbe aussehen.
Mithilfe von Stilklassen können Sie viele verschiedene Stile für verschiedene Elemente auf einer Webseite erstellen und diese leicht ändern, ohne andere Elemente zu beeinträchtigen.
Hinzufügen von Effekten, wenn Sie über eine Link-Schaltfläche schweben
Wenn Sie den Mauszeiger über eine Linkschaltfläche bewegen, können Sie die Hintergrundfarbe und die Textfarbe ändern, eine Unterstreichung hinzufügen oder die Form der Schaltfläche ändern. Auf diese Weise können Sie Interaktivität und Animationen auf Ihrer Website erstellen.
- Ändern der Hintergrundfarbe und der Textfarbe der Verknüpfungsschaltfläche beim Hover: Verwenden Sie die Pseudoklasse :hover, um den Wert der Eigenschaften background-color und color zu ändern.
- Hinzufügen eines Unterstrichs zum Text der Verknüpfungsschaltfläche beim Hover: Verwenden Sie die Pseudoklasse :hover, um die Text-decoration-Eigenschaft mit dem Wert underline hinzuzufügen.
- Ändern der Form der Verknüpfungsschaltfläche beim Hover: Verwenden Sie die Pseudoklasse :hover, um den Wert der border-radius-Eigenschaft zu ändern und die transform-Eigenschaft mit dem Wert scale hinzuzufügen.
Sie können den folgenden CSS-Code verwenden, um diese Effekte hinzuzufügen:
.button-link .button-link:hover .button-link:activeIm obigen Beispiel hat der Button-Link eine Klasse .button-link. Wenn Sie den Mauszeiger über eine Linkschaltfläche bewegen, werden die Hintergrund- und Textfarbe geändert und die Schaltfläche wird skaliert, wenn sie aktiviert ist.
Auf diese Weise können Sie mit CSS verschiedene Effekte hinzufügen, wenn Sie über eine Linkschaltfläche schweben, um sie für Benutzer interaktiver und attraktiver zu gestalten.
CSS. Stilisierung der Verknüpfungsschaltfläche mit einem Symbol
Um eine Schaltfläche mit einem Symbol zu erstellen, können wir eine Kombination aus CSS- und HTML-Markup-Stilen verwenden. Zuerst erstellen wir ein Linkelement mit einem Tag und fügen den Text hinzu, der auf der Linkschaltfläche angezeigt wird. Dann können wir das Symbol in den Link einfügen, indem wir das Tag verwenden .
Um den Link-Button zu stylen, können wir CSS-Eigenschaften wie background-color , color , font-size , border usw. verwenden. Legen Sie beispielsweise den Hintergrund einer Verknüpfungsschaltfläche mit background-color fest und fügen Sie mithilfe der Eigenschaft padding und border Einrückungen und Rahmen hinzu.
Um ein Symbol hinzuzufügen, können wir die CSS-Eigenschaft background-image verwenden. Zuerst müssen wir der Eigenschaft die URL des Symbols hinzufügen und dann die Größe des Symbols und die Position mit den Eigenschaften width , height , background-size und background-position festlegen.
Dann können wir das Pseudo-Element ::before oder ::after verwenden, um einen Hover-Effekt auf die Link-Schaltfläche zu erzeugen. Zum Beispiel können wir die Hintergrundfarbe ändern oder einen Schatten hinzufügen, wenn wir den Mauszeiger über eine Schaltfläche bewegen.
Mit diesen Ansätzen können Sie schöne und funktionale Linkschaltflächen mit Symbolen erstellen, die den einzigartigen Stil Ihrer Website hervorheben und die Benutzerattraktivität Ihrer Website erhöhen.
Hinzufügen eines Symbols zu einer Linkschaltfläche
Um einen Link-Button attraktiver und auffälliger zu machen, können Sie ihm ein Symbol hinzufügen. Ein Symbol kann dem Benutzer helfen, die Zuweisung einer Schaltfläche schnell zu bestimmen und sein Vertrauen zu wecken.
Sie müssen die CSS-Eigenschaft background-image verwenden, um dem Link-Button ein Symbol hinzuzufügen. Mit dieser Eigenschaft können Sie das Bild als Hintergrund des Elements festlegen.
Hier ist ein Beispiel dafür, wie Sie einem Link-Button ein Symbol hinzufügen können:
- Bereiten Sie das Symbol in einem geeigneten Format vor, z. B. im PNG- oder SVG-Format.
- Erstellen Sie ein Linkschaltflächenelement mit einem Tag und legen Sie eine Klasse oder eine ID für das Styling fest.
- Fügen Sie Stile für das Referenzschaltflächenelement hinzu, einschließlich der Eigenschaft background-image und dem Pfad zur Symboldatei.
Beispiel für Stile, die Sie verwenden können:
.button-link
In diesem Beispiel wird das Symbol links neben dem Text der Linkschaltfläche angezeigt. Sie können die Position und Größe des Symbols mithilfe der Eigenschaften background-position und background-size anpassen.
Vergessen Sie nicht, dem Symbol auch einen geeigneten Textersatz hinzuzufügen, um sicherzustellen, dass die Linkschaltfläche für Benutzer verfügbar ist, die Bildschirmleseprogramme verwenden oder Sehprobleme haben.
Verbesserung des Aussehens von Verknüpfungsschaltflächen mit Hilfe eines Symbols
Der Link-Button kann verbessert werden, indem ein Symbol hinzugefügt wird, das sein visuelles Design ergänzt und die Aufmerksamkeit der Benutzer auf sich zieht.
Um einem Link-Button ein Symbol hinzuzufügen, können Sie ein Tag mit einer Klasse verwenden, die das ausgewählte Symbol definiert. Zum Beispiel:
Das obige Beispiel verwendet ein Font-Icon aus der Font Awesome-Bibliothek. Die Klasse "fa" gibt an, dass es sich um ein Symbol aus dieser Bibliothek und eine Klasse handelt "fa-arrow-right" gibt an, dass es sich um ein Rechtspfeilsymbol handelt.
Sie können auch SVG-Symbole oder Bilder mit einem Tag verwenden, um einem Link-Button ein Symbol hinzuzufügen. Zum Beispiel:
Bei der Verwendung von Symbolen auf Linkschaltflächen müssen Sie ihre Farbe, Größe und Positionierung berücksichtigen, damit sie sich harmonisch mit dem Design der Schaltfläche verbinden und eine benutzerfreundliche und ansprechende Benutzeroberfläche erstellen.
Es ist wichtig sich daran zu erinnern, dass die Symbole auf den Linkschaltflächen nicht nur zur Dekoration und Aufmerksamkeit dienen, sondern auch eine semantische Belastung darstellen und für die Benutzer verständlich sein sollten.
