Wie erstelle ich ein klickbares Rechteck mit HTML und CSS?

Hier sehen Sie ein grünes Rechteck, das anklickbar ist und wie ein Link funktioniert. Wenn Sie darauf klicken, werden Sie zu einer anderen Webseite weitergeleitet.

Das klickbare Rechteck wird hier als ein HTML-Link (` `) gestaltet, da dieses Element von Haus aus klickbar ist. Durch CSS wird das Link-Element so gestaltet, dass es wie ein farbiges Rechteck mit Text aussieht. Die Breite und Höhe bestimmen die Größe des Rechtecks, und die `line-height` sorgt für die vertikale Zentrierung des Textes. Der `cursor: pointer;` lässt den Mauszeiger als Hand erscheinen, um Benutzerinteraktion anzuzeigen. Ein leichter Farbwechsel beim Hover sorgt für visuelles Feedback beim Überfahren mit der Maus.

Das Attribut `target="_blank"` öffnet die verlinkte Seite in einem neuen Tab, und `rel="noopener noreferrer"` erhöht die Sicherheit beim Öffnen externer Links. Wenn Sie statt einer Weiterleitung eine andere Funktion beim Klick wünschen (z. B. JavaScript ausführen), könnten Sie alternativ ein `