Come creare bottoni in CSS e HTML
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.
