Sie müssen eine Schaltfläche erstellen, die beim Hovern mit wirkt Elementor ?
Dann nehmen Sie in diesem prächtigen Bus Platz, denn was wir heute erreichen werden, sehen Sie im folgenden Video:
Lassen Sie uns eine Seite erstellen und sie dann mit ändern Elementor, und wählen Sie dann eine 2-Spalten-Struktur aus. Ändern wir im Bedienfeld den neu erstellten Abschnitt, indem wir ihn auswählen Mindesthöhe auf dem Feld Hauteur und sofort Mindesthöhe lass uns auf klicken VH dann setze den Cursor auf 100.
In der Registerkarte Design ändern wir die Hintergrundfarbe in # 070e39.
Lassen Sie uns in der ersten Spalte ein Schaltflächen-Widget ablegen und seinen Text durch Eingabe ändern Details anzeigen und lass es uns rechts ausrichten
In der Registerkarte Design lass es uns ändern Typografie indem Sie die Größe auf ändern 15, Transformation von Großbuchstaben et Buchstaben-Abstand von 1.1
In der Registerkarte fortgeschritten, alle ändern marges von 20 und in der Sektion Benutzerdefinierte CSS, fügen wir den folgenden Code ein, der der Schaltfläche einen Farbverlauf hinzufügt:
Selektor {
–Btn-Breite: 180px;
–Btn-Höhe: 50px;
–Btn-Hintergrund: # 0e1538;
–Linker Gradient: # F803F8;
–Rechtsverlauf: # 03F2FD;
}
Selektor a {
position: relative;
Breite: var (–btn-Breite);
Höhe: var (–btn-Höhe);
}
Selektor a: vorher,-
Selektor a: nach {
glücklich: ";
position: absolute;
Einschub: 0;
Übergang: 0.5s;
}
Selektor a: n-tes Kind (1): vorher,
Selektor a: n-tes Kind (1): nach {
Hintergrund: linear-Gradient (45deg, var (–links-Gradient), var (–btn-Hintergrund), var (–btn-Hintergrund), var (–rechts-Gradient));
}
Selektor a: schweben: vor {
Einschub: -3px;
}
Selektor a: schweben: nach {
Einschub: -3px;
Filter: Unschärfe (10px);
}
Auswahl einer Spanne {
position: absolute;
oben: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
Hintergrund: var (–btn-Hintergrund);
z-index: 10;
Anzeige: Flex;
Rechtfertigungsinhalt: Mitte;
Align-Items: Center;
Überlauf versteckt;
}
Wenn Sie nun mit der Maus über die Schaltfläche fahren, werden Sie großartige Effekte entdecken.
Um der Schaltfläche einen glänzenden Glaseffekt hinzuzufügen, fügen wir auch den folgenden Code ein:
/ * Glänzender Glaseffekt * /
Auswahl einer Spanne :: vor {
glücklich: ";
position: absolute;
oben: 0;
links: -50%;
Breite: 100%;
Höhe: 100%;
Hintergrund: rgba (255,255,255,0.075);
transformieren: schief (160deg);
}
Sie beobachten einen neuen Effekt, der mehr Licht auf den Knopf bringt.
Lesen Sie auch: So erstellen Sie einen Teammitgliedsbereich mit Elementor
Jetzt kopieren wir diese Schaltfläche und fügen sie in die zweite Spalte ein. Lassen Sie uns die Ausrichtung der Schaltfläche nach links ändern und den Text in ändern mehr.
Jetzt müssen Sie nur noch veröffentlichen Ihre Arbeit oder sehen Sie sich eine Vorschau an.
Hier sind 2 schöne Buttons entstanden.
Holen Sie sich jetzt Elementor Pro!
Zusammenfassung
So ! Das war es für dieses Tutorial, das Ihnen zeigt, wie Sie mit dem eine Schaltfläche mit Hover-Effekt erstellen Page Builder Elementor. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
