Tutorials

Tutorial: So erstellst du einen HTML-Button mit Link und CSS-Design

Melden

Hier ist ein ausführliches Tutorial, wie du einen HTML-Button erstellst, der auf eine andere Seite verlinkt, inklusive modernem CSS-Styling.

In der Webentwicklung gibt es verschiedene Wege, einen Button zu erstellen, der den Nutzer zu einer anderen Seite weiterleitet. Der sauberste Weg ist die Verwendung eines Links (<a>), der wie ein Button gestaltet wird, oder die Verwendung eines Formulars.

1. Die HTML-Struktur

Es gibt zwei gängige Methoden. Wir konzentrieren uns auf die empfohlene Methode (Link-Tag), da sie für Suchmaschinen (SEO) und die Barrierefreiheit am besten ist.

Methode A: Der Link als Button (Empfohlen)

Hier nutzen wir ein einfaches Anker-Tag (<a>) und geben ihm eine Klasse, damit wir es später mit CSS stylen können.

<a href="https://www.deine-zielseite.de" class="btn-link">Jetzt mehr erfahren</a>

Methode B: Der Button in einem Formular

Falls du unbedingt das <button>-Tag verwenden möchtest, kannst du es in ein Formular einbetten:

<form action="https://www.deine-zielseite.de">
    <button type="submit" class="btn-design">Zur Zielseite</button>
</form>

2. Das CSS-Styling (Design)

Damit der einfache Textlink wie ein echter, moderner Button aussieht, fügen wir CSS hinzu. Wir konzentrieren uns hier auf Methode A, da sie am flexibelsten ist.

Kopiere diesen Code in deinen <style>-Bereich oder deine .css-Datei:

/* Grundstyling des Buttons */
.btn-link {
    display: inline-block;
    padding: 12px 28px;
    background-color: #007BFF; /* Ein schönes Blau */
    color: #ffffff;            /* Weißer Text */
    text-decoration: none;     /* Entfernt den Unterstrich des Links */
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;        /* Abgerundete Ecken */
    transition: background-color 0.3s ease, transform 0.2s; /* Weiche Animation */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hover-Effekt (wenn man mit der Maus drüberfährt) */
.btn-link:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Drüberfahren */
    transform: translateY(-2px); /* Button hebt sich leicht an */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Klick-Effekt */
.btn-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

3. Komplette Beispiel-Datei

Hier ist der gesamte Code in einer einzigen HTML-Datei zusammengefasst, damit du ihn sofort testen kannst:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Button Link Tutorial</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f9;
        }

        .btn-link {
            display: inline-block;
            padding: 15px 30px;
            background-color: #28a745; /* Grün */
            color: white;
            text-decoration: none;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 18px;
            border-radius: 50px; /* Voll abgerundet */
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        }

        .btn-link:hover {
            background-color: #218838;
            box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
            transform: scale(1.05);
        }
    </style>
</head>
<body>

    <a href="https://www.google.de" class="btn-link">Seite besuchen</a>

</body>
</html>

4. Wichtige Tipps & Tricks

  1. Neuer Tab: Wenn die Seite in einem neuen Tab geöffnet werden soll, füge target="_blank" zum Link hinzu:
    <a href="..." class="btn-link" target="_blank" rel="noopener">In neuem Tab öffnen</a>
  2. Barrierefreiheit: Wenn du ein <a>-Tag als Button gestaltest, kannst du zusätzlich role="button" hinzufügen, damit Screenreader für Menschen mit Sehbehinderung das Element korrekt als Button erkennen.
  3. Breite: Wenn der Button die volle Breite einnehmen soll, ändere im CSS display: inline-block; zu display: block; und setze text-align: center;.

Viel Erfolg beim Ausprobieren!

0