2.9 Cursor und UI

Einführung

CSS ermöglicht die Gestaltung der Benutzeroberfläche und des Mauszeigers. Mit `cursor` kann das Zeiger-Icon geändert werden. `transition` erzeugt sanfte Animationen bei Zustandsänderungen. Pseudoklassen wie `:hover`, `:active`, `:focus`, `:checked` und `:disabled` erlauben das gezielte Stylen von Elementen je nach Zustand.

button {
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: blue;
}

button:active {
    background-color: darkblue;
}

input:focus {
    outline: 2px solid orange;
}

input:checked {
    background-color: green;
}

input:disabled {
    background-color: gray;
}