Schritt 1: Erstellen/Generieren einer svg-Grafik z.B. mit KI
Prompt:
Generiere den code für eine svg-grafik bestehend aus einem abgerundetem Rechteck mit der Breite 3cm und der Höhe 1cm, der Farbe marineblau mit leichtem Farbverlauf und dem Text “Button”, der zentriert angeordnet werden soll und die Schriftfarbe weiß haben soll.
Ergebnis:
<svg xmlns="http://www.w3.org/2000/svg" width="3cm" height="1cm" viewBox="0 0 300 100" preserveAspectRatio="none">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1e3a57"/>
<stop offset="100%" stop-color="#2b5a86"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="100" rx="12" ry="12" fill="url(#grad)"/>
<text x="150" y="50" fill="#ffffff" font-family="Arial, sans-serif" font-size="28" text-anchor="middle" dominant-baseline="middle">Button</text>
</svg>
Schritt 2: Diesen code in einen Editor (z.B. notepad++) einfügen und als svg-Datei (z.B. button.svg) speichern
Der Vorteil einer svg-Grafik ist, dass der Text und andere Parameter direkt im code angepasst werden können. Ansonsten kann jede andere Bilddatei als Schaltfläche verwendet werden.
Schritt 3: Die Datei in der Dateiliste hochladen.
Schritt 4: Bild an der gewünschten Stelle in der Webseite einbinden und mit einem entsprechenden Link versehen und mindesten Breite oder Höhe des Elementes definieren
mögliches Ergebnis:
