Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

Sie müssen mit Elementor eine Schaltfläche mit Hover-Effekt erstellen ?

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, sie dann mit Elementor ändern und dann eine 2-Spalten-Struktur auswählen. Lassen Sie uns im Panel den neu erstellten Abschnitt bearbeiten, indem Sie auswählen Mindesthöhe auf dem Feld Hauteur und sofort Mindesthöhe lass uns auf klicken VH dann setze den Cursor auf 100.

Erstellen Sie eine Schaltfläche mit Hover-Effekt mit Elementor

In der Registerkarte Style ä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

Erstellen Sie eine Schaltfläche mit Hover-Effekt mit Elementor

In der Registerkarte Style lass es uns ändern Typografie indem Sie die Größe auf ändern 15, Transformation von Großbuchstaben et Buchstaben-Abstand von 1.1

Erstellen Sie eine Schaltfläche mit Hover-Effekt mit Elementor

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,-

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen.

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;

}

Erstellen Sie eine Schaltfläche mit Hover-Effekt mit Elementor

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);

}

Erstellen Sie eine Schaltfläche mit Hover-Effekt mit Elementor

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 Ihre Arbeit veröffentlichen oder in der Vorschau anzeigen.

Hier sind 2 schöne Buttons entstanden.

Holen Sie sich jetzt Elementor Pro!

Fazit

So ! Das war's für dieses Tutorial, das Ihnen zeigt, wie Sie mit dem Elementor Page Builder eine Hover-Effekt-Schaltfläche erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, teilen Sie uns dies im 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.

...

0 Aktien
Aktie
tweet
Registrieren