Hast du noch Fragen? Schreibe mir einfach eine Nachricht!

Runde Buttons bei Elementor

In letzter Zeit sehe ich immer häufiger im Netz Websites, die runde Buttons einsetzen. Aus diesem Grund möchte ich dir zeigen, wie du ganz leicht runde Buttons bei Elementor erstellen kannst.

Beispiele von Websites
mit runden Buttons

Wenn es uns das Layout erlaubt, können wir auf unserer Website runde Buttons einsetzen. Wenn du nicht sicher bist, ob runde Buttons für dich in Frage kommen, empfehle ich dir die Button-Form so zu gestalten, dass sie für deine Webseitenbesucher als Buttons erkennbar bleiben.

Ich habe für dich ein paar Beispiele von Websites vorbereitet, die runde Buttons einsetzen. Vielleicht inspirieren sie dich und du bekommst Lust auf runde Buttons. 

Zwei runde Buttons auf der Website von AWAhome

Die Website von AWAhome  ist ein gutes Beispiel dafür, wie man runde Buttons sinnvoll einsetzen kann. Die Buttons sind perfekt im Layout der Website integriert. Wenn wir den gegenüberliegenden Kreis aus dem Text entfernen würden, würde die Website sofort weniger harmonisch wirken. Die Buttons ziehen die Aufmerksamkeit auf sich und werden durch den Farbkontrast kaum übersehen. 

Ein Beispiel davon, wie du einen runden Button platzieren kannst.

Bei dieser Website ist der Button auch kaum zu übersehen. Durch die offene Komposition der Website lädt der Button uns dazu ein, nach unten zu scrollen, um die Website anzuschauen. Bei runden Buttons muss man aufpassen, dass der Text darin knapp und kurz bleibt. Sonst sieht es sehr schnell nicht gut aus.

Ein Button mit einem Icon darin erleichtert die Navigation auf deiner Website. Screenshot von https://grandhouse.ru.com

Du kannst auch runde Buttons dafür einsetzen, um Icons darin zu platzieren. Durch diese Lösung schickst du deinen Webseitenbesuchern Signale, was sie weiter tun sollen. So steuerst du ihre Vorgehensweise auf deiner Website.

Alle drei Beispiele funktionieren gut, weil sie genug Kontrast zum Rest der Website aufweisen. Die Buttons sind gut zu sehen und ziehen die Aufmerksamkeit auf sich.

Wie erstelle ich runde Buttons bei Elementor 

Ich habe für dich eine einfache Einleitung für die Erstellung runder Buttons bei Elementor. 

Schritt 1

Füge einen Button an der Stelle ein, an der du ihn haben möchtest.

Schau, dass in der Padding-Spalte alle Eingaben gleich groß sind.

Anschließend wechsle beim Eckenradus zu Prozentangaben und gib überall die gleichen Werte von 50% ein.

Anschließend sieht dein Button noch nicht rund aus. 

Schritt 2

Füge den folgenden CCS-Code ein.

selector a{

display: inline-flex;

}

selector .elementor-button-content-wrapper{

align-items: center;

}

selector a:before{

content: "";

display: block;

padding-top: 100%

}

Der Button soll jetzt rund sein. 

Schritt 3

Passe die Farbe des Buttons so an, wie du sie haben möchtest. 

Ein Beispiel von runden Buttons mit Gradient 

Ich bin auf diese Website gestoßen, die runde Buttons direkt auf der Startseite nutzt und hatte so die Idee, zu zeigen, wie es geht. 

Als erstes erstellen wir einen runden Button nach dem Schema, das ich beschrieben habe.

Anschließend gehen wir zu Hintergrundstype und wählen Verlauf. Jetzt entscheiden wir uns für die zwei Farben. Wir nehmen die gleichen Farben wie im Beispiel oben.

Die erste Farbe ist  #BBE7F1. Die Position ist bei 8.

Die zweite Farbe ist #EC7F8F. Die Position ist bei 92.

Die Art des Gradients ist linear und der Winkel beträgt 180 Grad.

Wenn wir noch Boxschatten, wie im Beispiel haben möchten, setzt du bei der Unschärfe den Wert auf 5

So haben wir unseren Button ganz leicht und schnell erstellt. Wenn ich dir behilflich sein kann, hinterlasse einen Kommentar. Viel Glück mit deiner Website!

 

Hallo, ich bin Maria!

Mein Ziel ist es, die Websites zu erstellen, die deine Kunden aufhören lassen zu scrollen und stattdessen beginnen mit dir zu interagieren und sich am Ende für dich entscheiden.