TwoButtons

# Repetition Websites === Kleine HTML- und CSS-Übung === - Erstelle an passender Stelle in deiner Ordnerstruktur einen Ordner namens "Buttons". - Öffne Visual Studio Code (VSC) und öffne dort diesen Ordner. - Erstelle in VSC innerhalb des Ordners "Buttons" vier neue Dateien: //index.html//, //style.css//, //red.html// und //blue.html// - Erstelle in //index.html// die html-Grundstruktur mit den Tags ''html'', ''head'', ''title'', ''body''. - Binde in //index.html// die Datei //style.css// ein. - Bearbeite //index.html// und //style.css// so, dass die html-Datei möglichst genau so aussieht: {{ :gf_informatik:redpillbluepill.png?400 |}} - Wenn du auf den roten Button klickst, wird die Seite red.html geöffnet, wenn du auf die blauen Button klickst, wird die Seite //blue.html// geöffnet. - Beide Dateien zeigen eine beliebige Nachricht in grosser, weisser Schrift. Die Hintergrundfarbe von //red.html// ist rot, diejenige von //blue.html// blau. == Tipp == * **Verwende Links als Buttons.** Mit CSS-Eigenschaften wie ''padding'', ''border-style'', ''background-color'', ''text-decoration'', ''text-align'' etc. kannst du die Links wie Buttons aussehen lassen. == Zusatzaufgabe == Erweitere die CSS-Datei so, dass die Buttons die Farbe wechseln, wenn du den Mauszeiger darüber bewegst. * Der rote Button soll heller werden (''coral''), seine Schrift dunkel (''darkred'') * Der blaue Button soll heller werden (''cornflowerblue''), seine Schrift dunkel (''darkblue'') ++++Lösung| == HTML ==





    TwoButtons
    



    Entscheide dich:
    

    
        Rote Pille
        Blaue Pille

== CSS ==



body{
    background-color:lavender;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h1{
    text-align: center;
}

a{
    font-size: 14pt;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    border-style: outset;
}

a.red{
    background-color: red;
    color:lightpink ;
}

a.red:hover{
    background-color: coral;
    color: darkred
}

a.blue{
    background-color: blue;
    color:cyan;
}

a.blue:hover{
    background-color: cornflowerblue;
    color: darkblue
}

++++