Στο παράδειγμα η χρήση του Button αλλάζει το χρώμα του και εμφάνιζει ένα μηνυμά. Στον παραπάνω κώδικα CSS, πετυχαίνουμε την οπτική διάδραση ως εξής:

Hover (Κίνηση ποντικιού): Είναι μια κρίσιμη λειτουργία στην Αλληλεπίδραση Ανθρώπου-Υπολογιστή (HCI) γιατί δίνει άμεση ανατροφοδότηση στον χρήστη ότι το στοιχείο είναι “ζωντανό” και επιλέξιμο.

Active (Κλικ): Επιβεβαιώνει οπτικά την ενέργεια της επιλογής.

Transition: Η ομαλή μετάβαση (0.3 δευτερόλεπτα) κάνει τη διεπαφή λιγότερο “απότομη”.

See the Pen Button Color by spyros (@spyros) on CodePen.

Ασκηση: Επεκτείνετε τον κώδικα του παραδείγματος έτσι ώστε όταν ο χρήστης περνά το ποντίκι πάνω από το button τότε αυτό να αλλάζει τον κέρσορα.