Articolo originale: HTML Button Type – How to Add Buttons to your Website
I pulsanti sono una parte essenziale delle pagine web. Sono utili per vari scopi, dall'inviare di informazioni e accedere a più contenuti, fino a collegare tra loro sezioni di pagine web o altri siti web.
Il linguaggio HTML fornisce vari metodi per aggiungere pulsanti al tuo progetto: puoi usare gli elementi button, anchor o input di tipo button e submit.
In questo articolo ti guiderò all'utilizzo di questi 4 metodi, così saprai come aggiungere pulsanti al tuo sito senza difficoltà.
Come aggiungere tasti al tuo sito con il tag button
Il tag button è uno dei metodi più semplici per aggiungere pulsanti al tuo sito web. Per utilizzarlo basta aggiungere il testo che il pulsante dovrà mostrare tra i tag di apertura e chiusura, in questo modo:
<button>Sample Button</button>
Ho posizionato il pulsante al centro, utilizzando le proprietà flexbox, margin (margine), e height (altezza):
body {
background-color: #8d8d8d;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
}
Aggiungendo queste proprietà CSS, da questo momento in poi gli elementi della pagina saranno sempre centrati.
Per poter rendere questo pulsante interattivo, bisogna aggiungere JavaScript. Attraverso le seguenti righe di codice JavaScript inline, farò in modo che il pulsante faccia comparire una finestra di dialogo nel browser, ogni qual volta verrà cliccato.
<button onclick="alert('Hello Campers')">Sample Button</button>
Come aggiungere pulsanti al tuo sito attraverso il tag anchor
I pulsanti interattivi possono essere aggiunti anche attraverso il tag anchor. Il tag anchor è utilizzato principalmente per aggiungere link ai siti web, ma utilizzando i fogli di stile CSS possiamo dargli l'aspetto di un pulsante.
Il vantaggio di questo metodo è che possiamo collegare il pulsante ad un'altra pagina web senza utilizzare JavaScript.
Nel seguente esempio, ho creato un pulsante con il tag anchor, collegandolo al sito ufficiale di freeCodeCamp:
<a href="https://freecodecamp.org">Learn Coding for Free</a>
Nel browser avrà l'aspetto di un link:
Possiamo dargli l'aspetto di un pulsante utilizzando il CSS. Rimuoviamo la sottolineatura standard e il colore del testo, applichiamo un colore allo sfondo e al primo piano, e infine aggiungiamo le proprietà padding e border radius:
a {
text-decoration: none;
border: 0.2px solid #000;
color: #000;
background: #e6e4e4;
padding: 5px;
border-radius: 1px;
}
Con questo CSS non ho fatto altro che riprodurre l'aspetto standard dei tasti HTML.
Il tag anchor adesso ha questo aspetto:
Come aggiungere pulsanti al tuo sito con il type button del tag input
È possibile aggiungere pulsanti al tuo sito anche attraverso il type button del tag input. Si comporta esattamente come il tag button.
Il tag input è un elemento vuoto, ciò vuol dire che non ha un tag di chiusura. Quindi come si può aggiungere il testo che dovrà mostrare? Attraverso l'attributo value!
<input type="button" value="Sample Button" />
Come aggiungere pulsanti al tuo sito attraverso il type submit del tag input
Generalmente il type submit del tag input viene utilizzato all'interno di un elemento form, in modo che i dati inseriti dall'utente vengano inviati nel momento in cui il pulsante submit viene cliccato.
Così come il tag input di tipo button, si tratta di un elemento vuoto, quindi c'è bisogno dell'attributo value per aggiungere del testo che comunichi lo scopo del pulsante.
<input type="submit" value="Another Button" />
La differenza tra il tag input con type button e type submit sta nel fatto che il type submit, aggiunto in un elemento form, invia i dati inseriti senza alcun tipo di manipolazione attraverso JavaScript.
Ma nel caso del tag input con type button, c'è bisogno di utilizzare JavaScript per far in modo che funzioni. Infatti, utilizzando il type button all'interno di un elemento form, i dati non vengono inviati automaticamente quando il pulsante è cliccato.
Mini progetto: come creare un pulsante con effetto neon con HTML e CSS
Il tasto a luci neon è un design molto in voga, data la sua bellezza estetica. Con le informazioni apprese in questo articolo, adesso potrai crearne uno utilizzando il tag button e del CSS.
Prima di tutto, dobbiamo cambiare gli stili standard del pulsante:
<button>Neon Light</button>
button {
background-color: #000;
border: .5px solid crimson;
border-radius: 10px;
color: #fff;
padding: 8px;
}
Per adesso il pulsante ha questo aspetto:
Per implementare lo stile neon, possiamo utilizzare la proprietà box-shadow, che ci permette di aggiungere diversi valori necessari per creare questo effetto.
button {
background-color: #000;
border: .5px solid crimson;
border-radius: 10px;
color: #fff;
padding: 8px;
box-shadow: 0 0 30px 0 crimson,
0 0 30px 0 crimson,
0 0 10px 0 crimson inset;
}
Valori inseriti nella proprietà box-shadow:
- il primo valore rappresenta lo spostamento sull'asse x
- il secondo valore rappresenta lo spostamento sull'asse y
- il terzo valore rappresenta il raggio di sfumatura
- il quarto valore rappresenta l'estensione del raggio di sfumatura
- il quinto valore è il colore applicato all'ombra
Mi occorrevano solo l'estensione del raggio di sfumatura e il colore, quindi ho impostato gli altri valori a zero. Successivamente, ho fatto in modo che gli ultimi valori della proprietà box-shadow venissero applicati alla parte interna al tasto, aggiungendo inset.
Adesso il tasto presenta un effetto neon:
In conclusione
Questo articolo ti ha mostrato vari metodi per aggiungere pulsanti interattivi ai tuoi siti web. In HTML e CSS, ci sono sempre modalità diverse per raggiungere lo stesso scopo: questa è una delle ragioni per cui i pulsanti si possono aggiungere perfino attraverso il tag anchor.
È possibile anche creare un tasto che si comporta come un link, aggiungendo un tag anchor attorno ad un tag button.
Puoi anche aggiungere tasti attraverso qualunque altro tag, come ad esempio div, span e anche il tag p. Ma è meglio non utilizzare questi metodi per motivi di accessibilità, e per non danneggiare la SEO del tuo sito web.
Grazie per aver letto questo articolo.