Ti è mai capitato di lavorare con numeri come 1/3, il cui risultato è 0.33333... continuando all'infinito? Noi umani di norma arrotondiamo numeri del genere, ma ti sei mai chiesto come vengono gestiti dai computer?

In questo articolo esploreremo il modo in cui i computer gestiscono i numeri decimali illimitati, includendo il concetto degli errori di precisione. Esamineremo il problema aritmetico della virgola mobile, una problematica universale che riguarda vari linguaggi di programmazione. Ci focalizzeremo in particolare su come JavaScript affronta questo problema.

Inoltre, impareremo come funzionano le operazioni binarie dietro le quinte, il limite oltre il quale JavaScript tronca i numeri, basandosi sullo standard IEEE 754, e introdurremo BigInt come soluzione per gestire in maniera accurata grandi numeri senza perdere precisione.

Innanzitutto prendiamo in considerazione un esempio. Riesci ad indovinare il risultato di questa operazione?

console.log(0.1 + 0.2);

Potresti aver pensato che la risposta fosse 0.3, vero? Ma in realtà il risultato è:

Output: 0.30000000000000004

Ti starai chiedendo perché ciò accada. Perché ci sono così tanti zero in più, e perché l'ultima cifra è 4?

La risposta è semplice: i numeri 0.1 e 0.2 non possono essere rappresentati in maniera precisa in JavaScript (ovvero "esattamente" o "accuratamente")

Sembrerebbe facile, no? Ma la spiegazione è un po' più complicata.

Quindi cosa ne pensi? È un bug o una funzionalità?

Be', non è un bug. È un problema di base, che ha a che fare con il metodo in cui i computer gestiscono i numeri, in particolare i numeri a virgola mobile.  

Perché succede questa cosa?

Capiamolo attraverso la matematica di base.

La frazione 1/3, è rappresentata in decimali da 0.33333... dove il 3 si ripete all'infinito. Non possiamo scriverlo in maniera esatta, quindi lo approssimiamo come 0.333 o 0.333333 per risparmiare tempo e spazio.

In maniera simile, con un computer, dobbiamo comunque approssimare, perché 1/3 o 0.3333... sarebbe un numero troppo grande e occuperebbe un spazio infinito (che non abbiamo).

Ciò porta a quello che noi chiamiamo il problema aritmetico della virgola mobile.

Il problema aritmetico della virgola mobile

In parole povere, i numeri a virgola mobile sono numeri che non possono essere scritti in maniera esatta, e che quindi vengono approssimati. In un computer questo tipo di approssimazione può portare a piccoli errori di precisione, che chiamiamo il problema aritmetico della virgola mobile.

Spiegazione binaria

Adesso che ci siamo occupati di questa semplice spiegazione, comprendiamo questo concetto anche dal punto di vista binario. JavaScript gestisce tutto in codice binario dietro le quinte.

Binario è un sistema di numeri che utilizza solo due cifre: 0 e 1.

Perché 0.1 e 0.2 non possono essere rappresentati accuratamente nel sistema binario?

Il problema principale è che non tutti i numeri decimali possono essere perfettamente rappresentati come frazioni binarie.

Prendiamo 0.1 come esempio: quando si prova a rappresentare 0.1 in binario, si scopre che non può essere espresso come una frazione binaria finita, invece diventa una frazione continua, proprio come 1/3 in numeri decimali diventa 0.333..., ripetuto all'infinito.

In binario, 0.1 diventa:

0.0001100110011001100110011001100110011... (si ripete all'infinito)

Dato che i computer hanno una memoria limitata, non possono memorizzare questa sequenza infinita in maniera esatta, ma la devono troncare ad un certo punto, e ciò crea un piccolo errore di arrotondamento. Questo è il motivo per cui 0.1 in binario è solo una approssimazione dell'effettivo numero.

Come 0.1, 0.2 non può essere rappresentato accuratamente nel sistema binario. Diventa invece:

0.00110011001100110011001100110011... (si ripete all'infinito)

Di nuovo il computer tronca questa sequenza binaria infinita, causando un piccolo errore di rappresentazione.

Quindi cosa succede quando addizioniamo 0.1 + 0.2? Quando si addizionano 0.1 + 0.2 in JavaScript, le approssimazioni binarie per 0.1 e 0.2 sono sommate. Ma, dato che entrambi i valori sono solo approssimazioni, anche il risultato è una approssimazione.

Invece di ottenere esattamente 0.3, otterremo:

console.log(0.1 + 0.2); // Output: 0.30000000000000004

Questo minimo errore si verifica perché né 0.1 né 0.2 possono essere rappresentati accuratamente nel sistema binario, quindi il risultato finale ha un piccolo errore di arrotondamento.

Come tronca i numeri JavaScript?

Adesso sorge una domanda: come fa JavaScript a sapere quando deve troncare il valore (troncamento significa abbreviare un numero rimuovendo le cifre in più dopo un certo punto)?

C'è un limite massimo ed un limite minimo per farlo.

Per gestire questa operazione nel mondo dei computer, abbiamo uno standard che definisce come i numeri a virgola mobile vengono memorizzati e calcolati.

Standard IEEE 754

JavaScript utilizza lo standard IEEE 754 per gestire le operazioni aritmetiche con i numeri a virgola mobile.

Lo standard stabilisce dei limiti di numeri interi sicuri per il tipo Number in JavaScript, che evitano la perdita di precisione:

• Massimo Numero Intero Sicuro: 2^53 - 1 o 9007199254740991
• Minimo Numero Intero Sicuro: -(2^53 - 1) o -9007199254740991

Oltre questi limiti JavaScript non può rappresentare accuratamente i numeri interi, dato il modo in cui funziona l'aritmetica dei numeri a virgola mobile.

Per questa ragione, JavaScript ci fornisce due costanti per rappresentare questi limiti:  

• Number.MAX_SAFE_INTEGER
• Number.MIN_SAFE_INTEGER

Nel caso avessi bisogno di un numero più grande?

Se hai bisogno di lavorare con numeri più grandi del massimo numero intero sicuro (come quelli utilizzati nella crittografia o nelle finanze), JavaScript ha una soluzione: BigInt.

BigInt

BigInt è un oggetto integrato che ti permette di lavorare con numeri interi che vanno oltre il limite degli interi sicuri. Ti permette di rappresentare numeri più grandi di 9007199254740991 senza preoccuparti degli errori di precisione!

Per utilizzare BigInt bisogna semplicemente aggiungere una n alla fine di un numero intero:

const bigNumber = 1234567890123456789012345678901234567890n;

In alternativa, puoi utilizzare il costruttore BigInt:

const bigNumber = BigInt("1234567890123456789012345678901234567890");

Calcoli con BigInt

Si possono svolgere operazioni aritmetiche utilizzando BigInt, come addizione, sottrazione, moltiplicazione, e anche elevamento a potenza. Tuttavia, c'è un problema: non possiamo fare operazioni aritmetiche mescolando BigInt con il tipo Number, non senza prima fare delle conversioni esplicite tra un tipo e l'altro.

Per esempio, questo non funzionerà:

let result = bigNumber + 5; // Error: cannot mix BigInt and other types

C'è bisogno prima di convertire Number in BigInt:

let result = bigNumber + BigInt(5); // Adesso funziona!

Quando utilizzare BigInt?

BigInt è particolarmente utile in aree in cui è richiesta precisione, come ad esempio:

• Algoritmi crittografici
• Gestire grandi set di dati
• Calcoli finanziari che richiedono precisione

Riassumendo

• Il limite intero sicuro in JavaScript garantisce una rappresentazione accurata dei numeri tra -(2^53 - 1) e 2^53 - 1.
• Gli errori di precisione si verificano a causa dell'aritmetica dei numeri a virgola mobile, quando si lavora con particolari numeri (come 0.1 + 0.2).
• Se hai bisogno di utilizzare numeri oltre del limite sicuro, BigInt è tuo amico. Ma ricorda che per combinare BigInt con il tipo Number bisogna prima fare delle conversioni esplicite.

Ci saranno occasioni in cui avrai bisogno di scrivere comandi che gestiscono decisioni diverse nel tuo codice.

Per esempio, se stai creando un bot, puoi fare in modo che risponda con messaggi differenti in base ai comandi che può ricevere.

In questo articolo spiegherò cos'è un'istruzione if...else con esempi di codice. Ci occuperemo anche dell'operatore condizionale ternario, che può essere utilizzato come abbreviazione delle istruzioni if...else.

Cos'è un'istruzione if...else in JavaScript?

L'if...else è un tipo di istruzione condizionale (conditional statement), che esegue un blocco di codice quando la condizione contenuta nell'istruzione if è truthy (vera). Se la condizione è falsy (falsa), allora sarà il blocco else ad essere eseguito.

I valori truthy e falsy vengono convertiti in true (vero) o false (falso) nelle istruzioni if.

if (condizione) {
   // codice eseguito se la condizione è vera
} else {
   // codice eseguito se la condizione è falsa
}

Qualunque valore che non è definito falsy, verrà considerato truthy in JavaScript.

Ecco una lista di valori falsy :

• false
• 0 (zero)
• -0 (zero negativo)
• 0n (BigInt zero)
• "", '', `` (stringa vuota)
• null
• undefined
• NaN (not a number)

Esempi di istruzioni if...else in JavaScript

In questo esempio, la condizione nell'istruzione if  è true, quindi il messaggio che verrà mostrato nella console sarà "Nick is an adult".

const age = 18;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Ma se cambio la variabile age in modo che sia minore di 18, allora la condizione diventerà false, quindi il codice questa volta eseguirà il blocco else.

const age = 12;

if (age >= 18) {
  console.log("Nick is an adult.");
} else {
  console.log("Nick is a child.");
}

Esempi con varie condizioni (istruzioni if...else if...else) in JavaScript

A volte potresti voler testare varie condizioni, e in questi casi entra in gioco il blocco else if.

if (condizione 1) {
   // codice eseguito quando condizione 1 è true
} else if (condizione 2) {
  // codice eseguito quando condizione 2 è true
} else {
   // codice eseguito quando nessuna delle condizioni precedenti è true
}

Quando la condizione dell'if è false, il computer valuta la condizione dell'else if.  Se anche questa risulta false, allora passa al blocco else.

In questo esempio, il blocco else if sarà quello che verrà eseguito, dato che Alice ha un'età compresa tra 18 e 21 anni.

const age = 18;

if (age < 18) {
  console.log("Alice is under 18 years old.");
} else if (age >= 18 && age <= 21) {
  console.log("Alice is between the ages of 18 and 21.");
} else {
  console.log("Alice is over 21 years old.");
}

Quando utilizzare le istruzioni switch invece che le istruzionii if...else?

Ci sono occasioni in JavaScript in cui potresti considerare di utilizzare un'istruzione switch, invece di un'istruzione if else.

Le istruzioni switch  hanno una sintassi più pulita, a differenza delle complicate istruzioni if else.

Dai un'occhiata a questo esempio in basso – invece di utilizzare questa lunga istruzione if else, potresti scegliere di servirti di un'istruzione switch , che è molto più semplice da leggere.

const pet = "dog";

if (pet === "lizard") {
  console.log("I own a lizard");
} else if (pet === "dog") {
  console.log("I own a dog");
} else if (pet === "cat") {
  console.log("I own a cat");
} else if (pet === "snake") {
  console.log("I own a snake");
} else if (pet === "parrot") {
  console.log("I own a parrot");
} else {
  console.log("I don't own a pet");
}

const pet = "dog";

switch (pet) {
  case "lizard":
    console.log("I own a lizard");
    break;
  case "dog":
    console.log("I own a dog");
    break;
  case "cat":
    console.log("I own a cat");
    break;
  case "snake":
    console.log("I own a snake");
    break;
  case "parrot":
    console.log("I own a parrot");
    break;
  default:
    console.log("I don't own a pet");
    break;
}

Le istruzioni switch non sono sempre la scelta più appropriata in tutte le situazioni, ma se pensi delle istruzioni if else siano troppo lunghe e complicate, allora un'istruzione switch potrebbe essere un'opzione alternativa.

L'operatore logico AND (&&) e le istruzioni if...else in JavaScript

Con l'operatore logico AND (&&), se entrambe le condizioni sono true, allora verrà eseguito il  blocco if. Se una o entrambe le condizioni sono false, allora sarà eseguito il blocco else.

In questo esempio, dato che l'età è maggiore di 16 e la variabile ownsCar è true, verrà eseguito il blocco if. Il messaggio mostrato dalla console sarà "Jerry is old enough to drive and has his own car."  

const age = 17;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

Cambiando la variabile age in modo che sia minore di 16, entrambe le condizioni non sono più true e quindi verrà eseguito il blocco else.

const age = 13;
const ownsCar = true;

if (age >= 16 && ownsCar) {
  console.log("Jerry is old enough to drive and has his own car.");
} else {
  console.log("Jerry does not drive.");
}

L'operatore logico OR (||) e le istruzioni if...else in JavaScript

Nel caso dell'operatore logico OR (||), se una o entrambe le condizioni sono true, allora il codice nell'istruzione if sarà eseguito.

In questo esempio, anche se la variabile isSale è false, il codice nel blocco if verrà eseguito lo stesso, perché almeno la variabile boyfriendIsPaying è true.

const boyfriendIsPaying = true;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

Se cambiassi il valore della variabile boyfriendIsPaying in false, allora il blocco  else verrebbe eseguito, perché entrambe le condizioni sarebbero false.

const boyfriendIsPaying = false;
const isSale = false;

if (boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

L'operatore logico NOT (!) e le istruzioni if...else in JavaScript

L'operatore logico NOT (!) cambia il valore di qualcosa da true a false, ma può anche fare il contrario, trasformandolo da false a true.

Possiamo modificare l'esempio precedente utilizzando l'operatore !, per rendere false la variabile boyfriendIsPaying. Dato che entrambe le condizioni adesso sono false, il blocco else verrà eseguito.

const boyfriendIsPaying = true;
const isSale = false;

if (!boyfriendIsPaying || isSale) {
  console.log("Jesse will go shopping.");
} else {
  console.log("Jesse will not go shopping.");
}

L'operatore condizionale (ternario) in JavaScript

Se stai utilizzando un'istruzione if else breve, potresti scegliere di servirti dell'operatore ternario.

Questa è la sintassi di base dell'operatore ternario:

condizione ? se condizione è true : se condizione è false

La condizione è posizionata prima del simbolo ? e se è true, allora il codice tra il simbolo ? ed il simbolo : verrà eseguito. Se la condizione è false, allora sarà il codice dopo il simbolo : ad essere eseguito.

In questo esempio, dato che l'età è maggiore di 18, il messaggio mostrato dalla console sarà "Can vote".

const age = 32;
const citizen = age >= 18 ? "Can vote" : "Cannot vote";
console.log(citizen);

Questo è invece lo stesso codice, ma scritto usando un'istruzione if else:

const age = 32;
let citizen;

if (age >= 18) {
  citizen = "Can vote";
} else {
  citizen = "Cannot vote";
}

console.log(citizen);

In conclusione

Le istruzioni if else eseguono un blocco di codice se la condizione nell'istruzione if è truthy. Se la condizione è falsy, allora sarà il blocco else ad essere eseguito.

Ci saranno occasioni in cui vorrai testare varie condizioni, e in questi casi potrai utilizzare le istruzioni if...else if...else.

Se pensi che un'istruzione if else sia lunga e complicata, allora c'è la possibilità di utilizzare un'istruzione switch come alternativa.

Utilizzare gli operatori logici per testare più di una condizione, può essere un'alternativa alle istruzioni if else annidate l'una nell'altra.

L'operatore ternario può essere utilizzato come metodo per scrivere un'istruzione if else in modo più sintetico.

Per poter padroneggiare il CSS, c'è bisogno prima di comprendere i concetti base, ovvero le proprietà CSS e i loro valori.

In questo articolo ci focalizzeremo sulla proprietà CSS position. Impareremo i vari valori di questa proprietà ed il loro funzionamento. Partiamo!

Cos'è la proprietà CSS position?

La proprietà CSS position determina la posizione dell'elemento all'interno del documento. Questa proprietà lavora insieme alle proprietà left, right, top, bottom e z-index, per indicare la posizione finale di un elemento all'interno di una pagina.

Ci sono cinque valori che possiamo utilizzare con la proprietà position:  

1. static
2. relative
3. absolute
4. fixed  
5. sticky

Analizziamoli uno alla volta.

Static

Questo è il valore predefinito per un elemento. L'elemento è posizionato seguendo il normale flusso del documento. Le proprietà left, right, top, bottom e z-index non possono modificare la posizione di un elemento che ha la proprietà position: static.

Utilizziamo un esempio per dimostrare che position: static non ha effetto sulla posizione di un elemento. Abbiamo tre div posizionati in un elemento contenitore. Utilizzeremo questo esempio per tutto l'articolo.  

<html>
    <body>
        <div class="parent-element">
            <div class="sibling-element">
                I'm the other sibling element.
            </div>

            <div class="main-element">
                All eyes on me. I am the main element.
            </div>

            <div class="sibling-element">
                I'm the other sibling element.
            </div>
        </div>
    </body>
<html>

Aggiungiamo position: static insieme alle proprietà left e top al div con la classe main-element. Impostiamo anche uno stile diverso dagli altri div, in modo da distinguerli dall'elemento che abbiamo preso in considerazione.

.main-element {
    position: static;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.sibling-element {
    padding: 10px;
    background-color: #f2f2f2;
}

Questo è il risultato:

Hai notato che la posizione è sempre la stessa? Ciò conferma il fatto che le proprietà left e bottom non funzionano con un elemento con position: static.

Passiamo al prossimo valore.

Relative

Gli elementi con position: relative mantengono la loro posizione nel normale flusso del documento. In questo caso però, a differenza degli elementi con il valore static, le proprietà left, right, top, bottom e z-index possono modificare la posizione dell'elemento. Uno spostamento basato sui valori delle proprietà left, right, top e bottom, è applicato all'elemento relativamente a sé stesso.

Sostituiamo position: static con position: relative nel nostro esempio.

.main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

Possiamo notare che le proprietà left e bottom in questo caso modificano la posizione dell'elemento. Inoltre osserviamo il fatto che l'elemento rimanga nel normale flusso del documento, e lo spostamento si applica relativamente a sé stesso. È bene tenere a mente questa cosa nel momento in cui parleremo degli altri valori.

Absolute

Gli elementi con position: absolute hanno una posizione che dipende dal loro elemento contenitore. In questo caso, l'elemento viene rimosso dal normale flusso del documento, gli altri elementi si comporteranno come se non esistesse e per esso non viene creato alcuno spazio nella disposizione della pagina web. I valori di left, top, bottom e right determinano la posizione finale dell'elemento.

È bene notare che un elemento con position: absolute si posiziona relativamente al primo elemento non avente position: static che lo contiene.

Se l'elemento genitore più prossimo non ha una posizione specificata,  il nostro elemento si rivolgerà al genitore successivo, fino a risalire all'elemento <html>, in caso non ci siano genitori che hanno la proprietà position specificata.

Torniamo al nostro esempio. In questo caso, cambiamo la proprietà position dell'elemento main-element in position: absolute. Impostiamo anche per il contenitore una posizione relativa, in modo che il nostro elemento non si disponga relativamente all'elemento <html>.

.main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
    border: 1px solid #81adc8;
}

Ecco il risultato.

Puoi notare come non è stato creato alcuno spazio nel documento per l'elemento, ma adesso è posizionato relativamente al genitore. È bene prendere nota di questa cose, prima di passare al prossimo valore.

Fixed

Elementi con la proprietà position impostata su fixed, hanno un comportamento simile agli elementi con il valore absolute ma, a differenza di quest'ultimi, la loro posizione è sempre relativa all'elemento <html>.

Si può notare che gli elementi con una posizione fissa non si muovono, anche se si scorre verso il basso nella pagina. La loro posizione è fissata sullo schermo.

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

html {
    height: 800px;
}

In questo caso l'elemento è posizionato relativamente all'elemento <html>. Prova a scorre in basso per osservare che l'elemento è fissato sullo schermo.

Passiamo all'ultimo valore.

Sticky

position: sticky è una combinazione di position: relative e position: fixed. Si comporta come un elemento posizionato relativamente fino ad un certo punto nello scorrimento della pagina, ma oltre questo punto si comporta invece come un elemento fisso. Non preoccuparti se non riesci a capire cosa ciò voglia dire, l'esempio ti aiuterà a capirlo meglio.

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}

Scorri in basso nella finestra per vedere il risultato finale. Puoi vedere che si comporta come un elemento relativo fino ad un certo punto sullo schermo,  top: 10px e poi come un elemento fisso.

Conclusioni

Whooho! È stata proprio una bella avventura. Ma spero davvero che questo articolo ti abbia aiutato a capire la proprietà CSS position e il suo funzionamento.

Sentiti libero di sperimentare con gli esempi, in caso non riuscissi a capire qualunque di questi concetti. Puoi cambiare i valori e osservare la differenza o, ancora meglio, puoi provare a utilizzare la proprietà position in un tuo progetto personale.

Ricorda che migliorare con il CSS comporta pratica costante, quindi continua a fare pratica e migliorerai.

Vuoi ricevere una notifica per ogni mio nuovo articolo? Clicca qui.

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.