Come Modificare l'Aspetto dei Pulsanti Usando il Codice HTML

Co-redatto da Lo Staff di wikiHow

Questo articolo spiega come modificare il colore di un pulsante di una pagina web utilizzando il codice HTML. È possibile eseguire questa operazione modificando direttamente il codice sorgente della pagina oppure usando i fogli di stile CSS (dall'inglese "Cascading Style Sheets") in HTML5.

Metodo 1

Metodo 1 di 2:

Usare il Codice HTML

1
Inserisci il codice <button all'interno della sezione "body" del codice HTML. Si tratta del tag di apertura dell'elemento "button" del codice HTML. La sezione "body" di un documento HTML è l'area del codice delimitata dai tag <body> e </body>. La sezione "body" è il punto del codice HTML in cui vengono indicati tutti gli elementi che compongono la pagina web.
2
Aggiungi il codice style= dopo la parola chiave "button" dell'omonimo tag HTML. Il parametro "style" serve per specificare l'aspetto che dovrà avere un elemento – in questo caso, il pulsante in esame. Tutti gli attributi di stile devono essere elencati dopo il simbolo "=".
3
Aggiungi le virgolette (") dopo il segno di uguaglianza (=). Tutti gli attributi di stile specificati all'interno del codice HTML devono essere racchiusi tra virgolette.
4
Inserisci il codice background-color: . Digitalo all'interno delle virgolette, dopo il parametro "style=". L'attributo "background-color" viene usato per specificare il colore dello sfondo di un elemento HTML, in questo caso un pulsante.
5
Indica il nome del colore che vuoi usare o il codice esadecimale corrispondente. Inseriscilo nel codice dopo l'attributo "background-color:". Puoi usare direttamente il nome di un colore (per esempio "blue" o "red") oppure puoi indicare il codice esadecimale.
- Per risalire al codice esadecimale di un colore, visita questo link https://www.google.com/search?q=color+picker usando un browser internet. Si tratta di uno strumento messo a disposizione dal sito web di Google per la gestione della codifica dei colori. Usa la barra posta nella parte inferiore del riquadro per scegliere il colore da usare, quindi modifica la tonalità usando il cursore visualizzato nell'angolo superiore destro. Seleziona il codice esadecimale a sei cifre visualizzato nel campo "HEX" (ricorda di includere anche il simbolo "#") e incollalo all'interno del tag "button" del tuo documento HTML.
- Puoi utilizzare anche l'opzione "transparent" come colore dello sfondo di un elemento HTML.^{[1]
  X
  Fonte di ricerca}
6
Aggiungi il simbolo ";" dopo aver specificato il colore che dovrà assumere lo sfondo. Questo simbolo viene utilizzato come separatore fra i diversi attributi di stile di un elemento HTML.
7
Digita il codice border-color: all'interno delle virgolette e dopo l'attributo "style=". Questo parametro viene utilizzato per determinare il colore che dovranno avere i bordi del pulsante. Gli attributi di stile di un elemento HTML possono essere utilizzati in qualsiasi ordine. Occorre però indicarli dopo il tag "style=" all'interno delle virgolette. Ogni attributo va poi separato dagli altri usando il simbolo ";".
8
Indica il nome del colore, o il codice esadecimale corrispondente, che dovranno avere i bordi del pulsante. Riporta questo parametro all'interno del codice HTML, dopo l'attributo "border-color:".
- Se desideri che il pulsante non abbia i bordi visibili, usa l'attributo border:none in sostituzione di "border-color:".
9
Aggiungi il simbolo ";" dopo il colore che hai scelto. Usa il punto e virgola per separare i singoli attributi di stile che vuoi usare per il tag HTML "button".
10
Digita il codice color: all'interno delle virgolette e dopo il parametro "style=". Questo attributo viene utilizzato per modificare il colore del testo del pulsante. Gli attributi di stile di un elemento HTML possono essere utilizzati in qualsiasi ordine. Occorre però indicarli dopo il tag "style=", all'interno delle virgolette; ogni attributo va poi separato dagli altri usando il simbolo ";".
11
Indica il nome del colore, o il codice esadecimale corrispondente, che dovrà avere il testo visualizzato all'interno del pulsante. Riporta questo parametro all'interno del codice HTML dopo l'attributo "color:" del tag "style=".
12
Dopo aver inserito nel codice HTML tutti gli attributi di stile, aggiungi le virgolette di chiusura ("). Tutti gli attributi di stile vanno inseriti nel codice dopo il tag "style=" e racchiusi fra virgolette. Dopo aver terminato la dichiarazione degli attributi di stile del tuo pulsante, completa il codice HTML inserendo il simbolo delle virgolette (").
13
A questo punto digita il simbolo > dopo la serie di attributi del tag "style=". In questo modo completerai la dichiarazione del tag "button".
14
Inserisci il testo che dovrà essere visualizzato all'interno del pulsante. Dopo che hai completato l'inserimento del codice HTML relativo al tag "button", puoi digitare il testo che verrà visualizzato all'interno del pulsante.
15
A questo punto completa la dichiarazione del tag "button" inserendo il tag di chiusura corrispondente: </button>. Digitalo dopo il testo che verrà visualizzato all'interno del pulsante. In questo modo, il codice che descrive l'aspetto e il contenuto del tuo nuovo pulsante sarà completo e corretto dal punto di vista della sintassi. Arrivato a questo punto, il codice HTML che hai creato dovrebbe essere simile al seguente:
```
<!DOCTYPE html>
<html>
<body>
<button style="background-color:red; border-color:blue; color:white">Testo del pulsante</button>
</body>
</html>
```
Pubblicità

Metodo 2

Metodo 2 di 2:

Usare i Fogli di Stile CSS

1
Inserisci il tag <head> nella parte superiore del documento HTML. In questo modo, verrà creata la sezione "head" all'interno del codice HTML della pagina. All'interno della sezione "head" di un documento HTML vengono inserite informazioni che non verranno visualizzate nella pagina web corrispondente, come i meta dati, il titolo della pagina e i fogli di stile CSS.
2
Inserisci il tag <style>. Questa sezione del codice HTML viene usata per includere nella pagina i fogli di stile CSS e deve essere dichiarata all'interno della sezione "head" di un documento HTML.
- In alcuni casi, è possibile usare dei fogli di stile esterni al documento HTML. Se questo è il tuo caso, dovrai accedere alla cartella in cui è contenuto il foglio di stile CSS usato nel tuo documento HTML e modificare la sezione relativa al tag "button" che si trova all'interno del file CSS in esame.
3
Digita il codice .button { in una nuova riga del documento che si trova dopo il tag "<style>". In questo modo, stai creando la sezione del foglio di stile CSS dedicata alla gestione dell'aspetto degli elementi "button" della pagina.^{[2]
X
Fonte di ricerca}
- Puoi fare in modo che il colore del pulsante cambi quando il cursore del mouse gli viene posizionato sopra creando la sezione .button:hover {.
4
Inserisci il parametro background-color:. Devi digitarlo su una nuova riga del documento dopo il tag CSS ".button"^{[3]
X
Fonte di ricerca} Questo parametro serve per determinare il colore che avrà lo sfondo del pulsante.
5
Digita il nome del colore da usare o il codice esadecimale corrispondente seguito dal simbolo ";". Inseriscilo nel codice dopo il parametro "background-color:" della sezione ".button". In questo modo, specificherai il colore che dovrà assumere lo sfondo del pulsante.
- Per risalire al codice esadecimale di un colore, visita questo link https://www.google.com/search?q=color+picker usando un browser internet. Si tratta di uno strumento messo a disposizione dal sito web di Google per la gestione della codifica dei colori. Usa la barra posta nella parte inferiore del riquadro per scegliere il colore da usare, quindi modifica la tonalità usando il cursore visualizzato nell'angolo superiore destro. Seleziona il codice esadecimale a sei cifre visualizzato nel campo "HEX" (ricorda di includere anche il simbolo "#").
- Puoi utilizzare anche l'opzione "transparent" come colore dello sfondo di un elemento HTML. In questo caso, lo sfondo del pulsante risulterà trasparente.
6
Aggiungi il parametro border-color:. Questo elemento di stile determina il colore che dovranno assumere i bordi del pulsante. Aggiungilo su una nuova riga di testo della sezione ".button".
7
Digita il nome del colore da usare o il codice esadecimale corrispondente seguito dal simbolo ";". Inseriscilo nel codice dopo il parametro "border-color:" della sezione ".button". In questo modo, specificherai il colore che dovranno assumere i bordi del pulsante.
- Se desideri che il pulsante non abbia i bordi visibili, usa l'attributo border:none; in sostituzione di "border-color:[nome_colore]".
8
Digita il parametro di stile color:. Inseriscilo nel codice della pagina in una nuova riga di testo. Questo elemento controlla il colore del testo che verrà visualizzato all'interno del pulsante.
9
Digita il nome del colore da usare o il codice esadecimale corrispondente, seguito dal simbolo ";". Inseriscilo nel codice dopo il parametro "color:" della sezione ".button". In questo modo, specificherai il colore che dovrà assumere il testo del pulsante.
10
Inserisci la parentesi graffa di chiusura } in una nuova riga del documento. In questo modo completerai la dichiarazione della sezione ".button". Puoi creare più sezioni all'interno del foglio di stile CSS per controllare l'aspetto di ogni singolo pulsante presente nella pagina. In questo caso, dovrai assegnare un nome univoco a ciascun pulsante.
11
Inserisci il tag di chiusura </style> per completare la dichiarazione del foglio di stile CSS del documento. Dopo aver completato questa fase, digita il codice "</style>" in una nuova riga del documento per chiudere correttamente la sezione "style" del codice HTML.
12
Inserisci il tag </head>. Questo elemento serve per completare la dichiarazione della sezione "head" del documento HTML.
13
Usa il codice <a href="url" class="button">testo del pulsante</a> all'interno della sezione "body" del documento HTML. Si tratta del codice HTML che serve per aggiungere un pulsante all'interno della pagina con l'aspetto che hai indicato nella sezione "style" del documento HTML. Sostituisci il parametro "url" con l'indirizzo web a cui deve fare riferimento il pulsante. La sezione "body" di un documento HTML è la parte del codice racchiusa all'interno dei tag <body> e </body>. Arrivato a questo punto, il codice HTML che hai creato dovrebbe essere simile al seguente:
```
<!DOCTYPE html>
<html> 
  <head>
    <style>
     .button {
      background-color:blue;
      border-color:red;
      color:white;
      }
    </style>
  </head>
   <body>
      <a href="https://www.wikihow.com" class="button">Home</a>
   </body>
</html>
```
Pubblicità