Iniziamo scrivendo il nostro codice HTML e apriamo i tag per usare i CSS:
Codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>
Adesso creiamo un bottone e dopo avergli dato un ID ( # ) o una classe ( . )
personalizziamolo tra i tag "Style".

Codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#Button { width: 100px; height: 30px; background: #0000FF; border-style: none; cursor: pointer; margin: 150px auto; }
</style>
</head>
<body>
<button id="Button">PREMI</button>
</body>
</html>
Fino a qui un credo che le cose le sappiate. Ma adesso come fare in modo che le proprietÓ cambino quando ad esempio ci passo sopra con il mouse?
Semlice. basta che tra i tag "style" ci inserite un'altra proprietÓ.
Come prima cosa riscrivete la classe o l'ID che volete modificare, in questo caso l'ID "Button", poi dopo ci inserite la parola":hover". e dopo inserite (tra parentesi graffe) le proprietÓ che volete modificare.
Questo dovrebbe essere il documento una volta fatto tutto ci˛:

Codice HTML:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#Button { width: 100px; height: 30px; background: #0000FF; border-style: none; cursor: pointer; margin: 150px auto; }
#Button:hover { color: #CCC; background: #000FFF; }
</style>
</head>
<body>
<button id="Button">PREMI</button>
</body>
</html>
Il ":hover" sta a significare che quando ci andremo sopra con in cursore le proprietÓ che gli diremo cambieranno. Non c'Ŕ bisogno di riscrivere tutte le proprietÓ, ma basta scrivere solo quella da modificare, le proprietÓ che non tratteremo rimarranno invariate.

Ovviamente non esiste solo Hover, ma ne esistono altri:
:active { quando ci premeremo sopra }
:checked { quando determinati oggetti saranno "checkati", come dei pulsanti di scelta(...) }
:disabled { quando un oggetto sarÓ disabilitato }
:enabled { il contrario di disabled }
:focus { (non lo so spiegare bene) avete presente quando voi premete il tasto Tab e vi scorrerÓ gli oggetti? se voi premendo il tasto tab vi selezionerÓ un bottone ad esempio quello sarÓ sotto focus }

Questi sono tutti quelli che mi ricordo. spero vi sia stato utile. Premendo QUI andrete agli esempi;
mentre premendo QUI andrete al mio sito web.