Kreisschaltfläche erstellen in CSS

In diesem Artikel wird eine Methode zum Erstellen einer kreisförmigen Schaltfläche in CSS vorgestellt.

Verwenden Sie die Eigenschaft border-radius, um einen Kreis-Button in CSS zu erstellen

Wir können die Eigenschaft border-radius verwenden, um einen kreisförmigen Button in CSS zu erstellen. Die Eigenschaft erstellt die abgerundeten Ecken für das ausgewählte Element, indem der Radius zu den Ecken des Elements hinzugefügt wird.

Die Eigenschaft border-radius akzeptiert einen bis vier Werte als Optionen. Wir werden uns die Beispiele unten ansehen.

Bei border-radius mit vier Werten gilt der Anfangswert für die linke obere Ecke, der zweite Wert für die rechte obere Ecke, der dritte Wert für die rechte untere Ecke und der Endwert für die untere Ecke. linke Ecke.

border-radius: 12px 50px 20px 5px

Bei drei Werten gilt der Anfangswert für die linke obere Ecke, der zweite Wert für die rechte obere und linke untere Ecke und der Endwert für die rechte untere Ecke.

border-radius: 12px 50px 20px

Der Anfangswert gilt für die oberen linken und unteren rechten Ecken in den beiden Werten, und letzterer gilt für die oberen rechten und unteren linken Ecken.

border-radius: 12px 50px

Wenn ein einzelner Radius festgelegt wird, wird eine kreisförmige Ecke erstellt, da er für alle Ecken des Elements gilt.

border-radius: 12px

Wir können die Eigenschaft border-radius verwenden, um einen perfekten kreisförmigen Button zu erstellen, indem wir den border-radius mit genau der Hälfte der Höhe und Breite des Buttons angeben. Wir können für die Demonstration einen einzigen Wert, border-radius, verwenden.

Erstellen Sie beispielsweise eine Schaltfläche mit dem HTML-Tag button. Schreiben Sie den Text Click here in die Schaltfläche.

Wählen Sie nun in CSS den Button aus und geben Sie die height und width des Buttons auf 200px an. Geben Sie dann den border-radius als 50% oder 100px an.

Der von uns eingegebene 100px border-radius entspricht der halben Höhe und Breite des Buttons. Als Ergebnis bildet jede Ecke des Knopfes eine abgerundete Ecke mit dem halben Radius der Seitenlänge.

Wir können den Wert 50% für border-radius verwenden, um es zu vereinfachen. Daher haben wir eine kreisförmige Schaltfläche mit der CSS-Eigenschaft border-radius erstellt.

Beispielcode:

<button> Click here </button>

button {
 height: 200px;
 width: 200px;
 border-radius: 100px;
}

button {
 height: 200px;
 width: 200px;
 border-radius: 50%;
}