Das Bild zeigt einen
CSS Button Generator, ein webbasiertes Werkzeug zur visuellen Gestaltung von Schaltflächen für Webseiten.
Das Interface ist in einem modernen Dark Mode gehalten und bietet folgende Funktionen:
Anpassungsoptionen (Linke Seite)
Generatoren-Menü: Ermöglicht den Wechsel zwischen verschiedenen CSS-Werkzeugen wie Button, Box Shadow, Border Radius, Gradient, Text Shadow und Animation.
Button-Einstellungen:
Button Text: Der Text auf der Schaltfläche kann frei editiert werden (hier: "Klick mich").
Farbauswahl: Es gibt separate Steuerungen für Hintergrundfarbe (#6c63ff), Textfarbe (#ffffff) und Hover-Farbe (#9c63ff).
Schieberegler (Sliders): Für präzise Einstellungen von Border Radius (Abrundung), Font Size (Schriftgröße) sowie Padding X und Padding Y (Innenabstände).
Vorschau und Code (Rechte Seite)
Live Vorschau: Ein interaktives Fenster zeigt sofort, wie der Button mit den aktuellen Einstellungen aussieht.
Code-Ausgabe: Das Tool generiert automatisch den dazugehörigen CSS- und HTML-Code. In der Ansicht ist ein CSS-Klassen-Selektor .myButton mit Attributen wie background, color, border-radius und padding zu sehen.
Kopieren-Funktion: Ein Button ermöglicht es, den fertigen Code direkt in die Zwischenablage zu kopieren.
Datenbank-Funktion
Wie du richtig angemerkt hast, verfügt das Tool über eine Datenbank-Integration.
Speichern: Über den Button „Speichern“ (unten links oder rechts beim Code) können die erstellten Designs gesichert werden.
Abrufen: Über den Menüpunkt Datenbank in der linken Seitenleiste oder den Button oben rechts lassen sich gespeicherte Codes jederzeit wieder aufrufen und weiterbearbeiten.
einfach config anpassen und direkt loslegen.
