{"id":10641,"date":"2022-08-16T07:00:23","date_gmt":"2022-08-16T05:00:23","guid":{"rendered":"https:\/\/isartidelweb.it\/?p=10641"},"modified":"2025-07-09T11:34:28","modified_gmt":"2025-07-09T09:34:28","slug":"ecco-perche-i-bottoni-del-tuo-sito-fanno-schifo-parte-2","status":"publish","type":"post","link":"https:\/\/sartoteca.it\/blog\/2022\/08\/16\/ecco-perche-i-bottoni-del-tuo-sito-fanno-schifo-parte-2\/","title":{"rendered":"Ecco perch\u00e9 i bottoni del tuo sito fanno schifo &#8211; parte 2"},"content":{"rendered":"<p>Ciao e bentornata\/o sulla rubrica del Fabbro,<br \/>\nLa scorsa settimana abbiamo parlato di bottoni e di quanto siano importanti per potenziare al massimo le tue call to action.<\/p>\n<p>Questa \u00e8 la seconda parte di quell&#8217;articolo, perci\u00f2 se ti fossi perso l&#8217;introduzione, puoi recuperarla subito <a href=\"https:\/\/isartidelweb.it\/2022\/08\/09\/ecco-perche-i-bottoni-del-tuo-sito-fanno-schifo-parte-1\/\" target=\"_blank\" rel=\"noopener\">facendo click qui<\/a>.<\/p>\n<p>Ecco cosa ti prometto oggi: <strong>dopo aver letto questo articolo i tuoi bottoni saranno perfetti, sia su desktop che mobile<\/strong>. parola di Fabbro!<\/p>\n<p>Non voglio spoilerare troppo subito, per\u00f2<\/p>\n<p><strong style=\"text-decoration: underline;\">ti insegner\u00f2 un metodo incredibile per manipolare totalmente l&#8217;aspetto dei tuoi bottoni sui dispositivi mobile.<\/strong><\/p>\n<p>Hai presente le righe di codice che ti ho fatto inserire nel pannello &#8220;Personalizza&#8221; di WordPress marted\u00ec scorso?<\/p>\n<p>Molto bene! Partiremo da l\u00ec e <strong>perfezioneremo il tutto<\/strong> per assicurarci che i tuoi bottoni siano pi\u00f9 belli, pi\u00f9 visibili e soprattutto pi\u00f9 efficaci!<\/p>\n<p>Ci assicureremo anche che siano responsive, in modo tale da massimizzare le conversioni delle call to action su tutto il tuo sito.<\/p>\n<p>Con i bottoni che avrai allora sar\u00e0 impossibile per i visitatori del tuo sito non cliccarli, li renderemo <em><strong>irresistibili<\/strong><\/em>!<\/p>\n<p>Infine, <strong>ti mostrer\u00f2 anche come aggiungere una leggera ombreggiatura ai tuoi bottoni<\/strong>, per far s\u00ec che &#8220;stacchino&#8221; dallo schermo e dargli un po&#8217; di tridimensionalit\u00e0.<\/p>\n<p>Scommetto che non vedi l&#8217;ora di iniziare, perci\u00f2 adesso raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caff\u00e8 preferito!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5220\" src=\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920-600x400.jpg\" alt=\"caff\u00e8\" width=\"392\" height=\"261\" title=\"\" srcset=\"https:\/\/sartoteca.it\/blog\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920-600x400.jpg 600w, https:\/\/sartoteca.it\/blog\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920-1024x683.jpg 1024w, https:\/\/sartoteca.it\/blog\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920-768x512.jpg 768w, https:\/\/sartoteca.it\/blog\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920-1536x1024.jpg 1536w, https:\/\/sartoteca.it\/blog\/wp-content\/uploads\/2021\/02\/coffe-1354786_1920.jpg 1200w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/p>\n<h2>Dove eravamo rimasti&#8230;<\/h2>\n<p>Ah s\u00ec! Ora ricordo:<br \/>\nti avevo mostrato come personalizzare i colori dei tuoi bottoni ma si era creato quell&#8217;inconveniente per cui, una volta passato su il mouse, questi sono tornati al loro colore originario.<\/p>\n<p>Anche se nel tuo caso questo piccolo inconveniente non sia capitato, devi comunque seguire questo passaggio per avere controllo totale sul colore.<\/p>\n<p>Mi spiego meglio.<\/p>\n<p>Di solito, quando passi il mouse su un bottone, siamo abituati a vederlo assumere un colore leggermente pi\u00f9 scuro.<\/p>\n<p>Ti sei mai chiesto come mai?<\/p>\n<p>Beh, per <strong>evidenziarlo e mettere al corrente l&#8217;utente che sta per cliccarlo<\/strong> e dopo accadr\u00e0 qualcosa.<\/p>\n<p><em>Ma come si effettua questa modifica?<\/em><\/p>\n<h2>Come modificare il colore dei bottoni al passaggio del mouse<\/h2>\n<p>Torniamo un secondo al codice della scorsa settimana perch\u00e9 partiremo da l\u00ec.<\/p>\n<p>Eccolo, dovrebbe essere pi\u00f9 o meno cos\u00ec (naturalmente il tuo non sar\u00e0 mai identico al mio):<br \/>\n<code>a.nome-della-tua-classe {<br \/>\nbackground: #il codice colore che hai copiato e incollato !important;<br \/>\ncolor: #fff !important;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Benissimo, adesso copia il tuo vecchio codice e incollalo esattamente due righe pi\u00f9 in basso all&#8217;interno del pannello Personalizza.<\/p>\n<p>In pratica dovrai ritrovarti con due porzioni di codice identiche.<\/p>\n<p>Sulla seconda porzione di codice aggiungi la scritta &#8220;:hover&#8221; subito dopo il selettore della classe CSS.<\/p>\n<p>Ti ritroverai con la seconda porzione di codice pi\u00f9 o meno simile a questa:<br \/>\n<code>a.nome-della-tua-classe:hover {<br \/>\nbackground: #il codice colore che hai copiato e incollato !important;<br \/>\ncolor: #fff !important;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Mi raccomando, <strong style=\"text-decoration: underline;\">fai attenzione a come aggiungi questa scritta e in generale a rispettare la punteggiatura indicata<\/strong>: spesso basta uno spazio indesiderato o un errore di digitazione banale per compromettere il funzionamento del codice.<\/p>\n<p>Don&#8217;t panic: il tuo sito non si pu\u00f2 rompere in questo modo, perci\u00f2 <strong>sentiti libero di sperimentare<\/strong>.<\/p>\n<p>Se accade qualcosa di inaspettato sulla schermata destra dell&#8217;anteprima puoi sempre cancellare il codice e far tornare tutto come prima.<\/p>\n<p>Ok! Adesso cerchiamo di capire cosa abbiamo fatto aggiungendo l&#8217;istruzione :hover al codice.<\/p>\n<p>In poche parole abbiamo detto al sistema:<\/p>\n<p>&#8220;l&#8217;istruzione tra parentesi graffe deve modificare esclusivamente l&#8217;aspetto dei bottoni quando ci si passa sopra il mouse&#8221;.<\/p>\n<p>Adesso quindi non ci resta che sostituire il colore indicato dopo la scritta &#8220;background:&#8221; con una tonalit\u00e0 leggermente pi\u00f9 scura.<\/p>\n<p>Consiglio: fatti aiutare dal sito <a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener\">coolors<\/a> per trovare il colore pi\u00f9 adatto alla situazione. Incollaci dentro quello di base (inserito nella prima porzione del codice), fai click su &#8220;Shadows&#8221; e scegli un colore che sia pi\u00f9 scuro di almeno 2 stop.<\/p>\n<p>Lascia sempre la scritta &#8220;!important&#8221; dopo aver indicato il codice colore perch\u00e9 serve per sovrascrivere le impostazioni di default del tema WordPress attivo.<\/p>\n<p>In altre parole, se la togli c&#8217;\u00e8 rischio che il colore al passaggio del mouse resti identico a prima.<\/p>\n<p>Fatto? <em>Ottimo!<\/em><\/p>\n<p>Adesso nell&#8217;anteprima a destra passa il mouse sul bottone e guarda se \u00e8 filato tutto liscio.<\/p>\n<p>Che ne diresti di aggiungere anche una leggera ombreggiatura al bottone per &#8220;staccarlo&#8221; dallo schermo e dargli un po&#8217; pi\u00f9 di tridimensionalit\u00e0?<\/p>\n<h2>Come aggiungere un&#8217;ombreggiatura ai tuoi bottoni<\/h2>\n<p>Questa operazione pu\u00f2 rivelarsi molto efficace soprattutto per i bottoni su sfondi chiari.<\/p>\n<p>Prenditi un minuto per osservare questo bottone:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10645\" src=\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2022\/08\/bottone-con-ombreggiatura.png\" alt=\"bottone con ombreggiatura\" width=\"541\" height=\"179\" title=\"\"><\/p>\n<p>Sembra quasi uscire fuori dallo schermo, vero?<\/p>\n<p>Per ottenere questo risultato <strong>basta aggiungere solo un po&#8217; di ombreggiatura<\/strong>.<\/p>\n<p>Apri nuovamente il pannello &#8220;Personalizza&#8221; di WordPress.<\/p>\n<p>Torna sul primo blocco di codice, ovvero quello che abbiamo scritto insieme la settimana scorsa.<\/p>\n<p>Quello che devi fare adesso \u00e8 semplicemente aggiungere uno spazio prima della chiusura della parentesi graffa e scriverci dentro questa istruzione:<br \/>\nbox-shadow: 0 8px 6px -6px black !important;<\/p>\n<p>Il tuo codice adesso dovrebbe essere molto simile a questo:<br \/>\n<code>a.nome-della-tua-classe:hover {<br \/>\nbackground: #il codice colore che hai copiato e incollato !important;<br \/>\ncolor: #fff !important;<br \/>\nbox-shadow: 0 8px 6px -6px black !important;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Nota: pu\u00f2 darsi anche che nel tuo caso non ci sia bisogno di inserire la scritta finale &#8220;!important&#8221; sull&#8217;ultima istruzione, soprattutto se di default i bottoni del tuo tema non hanno un&#8217;impostazione di ombreggiatura.<\/p>\n<p>Se cos\u00ec non fosse lascia l\u00ec la scritta e goditi l&#8217;ombreggiatura sui tuoi bottoni!<\/p>\n<p>E adesso? Abbiamo finito? Quasi. Diciamo che <strong>manca ancora soltanto la parte&#8230; pi\u00f9 importante<\/strong>! Perci\u00f2 se ne hai bisogno afferra un&#8217;altra tazza del tuo caff\u00e8 preferito ma poi torna davanti allo schermo e continua a leggere!<\/p>\n<p>Adesso dobbiamo verificare che i bottoni abbiano l&#8217;aspetto migliore possibile anche su cellulare!<\/p>\n<h2>Come modificare l&#8217;aspetto dei tuoi bottoni sul cellulare<\/h2>\n<p>Apri ancora una volta il pannello &#8220;Personalizza&#8221; di WordPress e nota bene questa icona:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10646\" src=\"https:\/\/isartidelweb.it\/wp-content\/uploads\/2022\/08\/icona-cellulare.png\" alt=\"icona cellulare\" width=\"541\" height=\"171\" title=\"\"><\/p>\n<p>Vista? Adesso cliccaci su.<\/p>\n<p>Se hai fatto tutto per bene in questo momento vedrai rimpicciolire la schermata di anteprima sulla destra.<\/p>\n<p>Molto bene: quella \u00e8 l&#8217;anteprima dell&#8217;aspetto che avr\u00e0 la pagina del tuo sito su cellulare.<\/p>\n<p>Attenzione: <strong>la riproduzione dell&#8217;anteprima \u00e8 molto fedele, ma non precisissima al 100%<\/strong>. Per questo motivo, quando avremo finito dovrai dare un&#8217;occhiata al tuo sito direttamente dal tuo cellulare.<\/p>\n<p>Anche stavolta dovrai inserire del codice CSS all&#8217;interno del pannello; nello specifico devi copiare e incollare questo dopo le altre istruzioni:<br \/>\n<code>@media (min-width: 320px) and (max-width: 480px) {<\/code><\/p>\n<p>}<\/p>\n<p>Come avrai intuito, all&#8217;interno delle parentesi graffe scriveremo altre istruzioni.<\/p>\n<p>Ma cos&#8217;\u00e8 quella roba &#8220;@media min&#8221; ecc.?<\/p>\n<p>In pratica stiamo dicendo al sito:<br \/>\n<strong>mostra le prossime istruzioni soltanto su schermi larghi minimo 320px e massimo 480px.<\/strong><\/p>\n<p><strong>Si tratta dell&#8217;istruzione standard per schermi di cellulari.<\/strong><\/p>\n<p>Adesso osserva i bottoni del tuo sito e tieni presente che andremo a modificarlo soltanto per cellulari.<\/p>\n<p>Quello che intendo \u00e8:<\/p>\n<p>effettua questo passaggio solo dopo aver sistemato i bottoni su pc, lascia per ultimo questo passaggio perch\u00e9 \u00e8 specifico per cellulari.<\/p>\n<p>Il testo dei bottoni sui cellulari \u00e8 troppo grande?<\/p>\n<p>Allora modificalo cos\u00ec:<br \/>\n<code>@media (min-width: 320px) and (max-width: 480px) {<\/code><\/p>\n<p>a.nome-della-tua-classe {<br \/>\nfont-size: 14px !important;<br \/>\n}<\/p>\n<p>}<\/p>\n<p>Come vedi questo blocco \u00e8 molto simile a quelli che abbiamo utilizzato in precedenza, solo che va collocato all&#8217;interno delle parentesi riferite a @media per far s\u00ec che le istruzioni interessino esclusivamente la visualizzazione dei bottoni da cellulare.<\/p>\n<p>Nota: <strong>il pixel \u00e8 una delle varie unit\u00e0 di misura che puoi usare sul web<\/strong>. 14px \u00e8 un valore che ho sparato a caso, se vedi che il testo \u00e8 ancora troppo grande o troppo piccolo modificalo in 10px oppure 20px. Le dimensioni varieranno anche alla grandezza base del font che stai utilizzando, perci\u00f2 non posso fornirti un valore preciso.<\/p>\n<p>Modifica la grandezza in pixel varie volte finch\u00e9 non trovi la grandezza ideale del carattere.<\/p>\n<p>Puoi anche utilizzare valori come 14.5px (cio\u00e8 per intenderci quattordici pixel e mezzo) o 10.3px.<\/p>\n<p>Sotto font-size potresti anche inserire un&#8217;istruzione &#8220;background&#8221; per cambiare il colore dei bottoni su cellulare (nel caso volessi abbiano un aspetto diverso dalla versione pc).<\/p>\n<p>E se ad esempio tu volessi far s\u00ec che i bottoni abbiano un&#8217;ombreggiatura su pc ma disattivarla su cellulare?<\/p>\n<p>Allora dovresti aggiungere sotto font-size la riga:<br \/>\nbox-shadow: none !important;<\/p>\n<p>Se anche modificando l&#8217;ampiezza del carattere i bottoni dovessero risultare troppo grandi, puoi agire modificando il valore &#8220;width&#8221;, ovvero larghezza.<\/p>\n<p>Per farlo, anzich\u00e9 usare l&#8217;unit\u00e0 di misura px useremo un valore percentuale.<\/p>\n<p>Ancora sotto font-size aggiungi:<br \/>\nwidth: 70% !important;<\/p>\n<p>Anche in questo caso il numero 70 \u00e8 sparato a caso e dovrai modificarlo in base a quanto vuoi ridurre la larghezza del bottone.<\/p>\n<p><em>Sei ancora qui?<\/em><\/p>\n<p>Molto bene, <strong>hai appena eseguito una tecnica da maestro di WordPress e sei in grado di modificare i bottoni del tuo sito a piacimento!<\/strong><\/p>\n<p><strong>Conclusioni<\/strong><br \/>\nC&#8217;\u00e8 ancora qualche altra modifica che vorresti fare sui bottoni e che non ti ho mostrato nella guida?<\/p>\n<p>Allora fammelo sapere nei commenti e ti mostrer\u00f2 come fare!<\/p>\n<p>Se invece hai riscontrato qualche problema durante l&#8217;inserimento del codice scrivimi comunque un commento qui sotto: ti aiuter\u00f2 a far funzionare tutto per bene.<\/p>\n<p>Stesso discorso per quanto riguarda le guide del futuro:<\/p>\n<p>vuoi che ti continui a parlare di CSS nelle prossime guide? Fammelo sapere e pubblicher\u00f2 ancora articoli a riguardo!<\/p>\n<p>Come abbiamo visto in queste due settimane modificare i bottoni di un sito WordPress pu\u00f2 non sempre essere facilissimo e ci\u00f2 dipende in gran parte dal tema in uso.<\/p>\n<p>Adesso per\u00f2 sei in grado con questa tecnica di modificarli a tuo piacimento, a prescindere da qualsiasi tema!<\/p>\n<p>Per non perderti altre guide come questa iscriviti subito alla rubrica del Fabbro!<\/p>\n<p>Fai click qui, compila il form e preparati a ricevere in anteprima ogni mio articolo direttamente all&#8217;interno del tuo indirizzo email preferito!<br \/>\nVuoi scoprire altri metodi infallibili per gestire il tuo sito web al meglio senza dover prendere a martellate il tuo computer? Allora ho una buona notizia per te: <strong>\u00e8 uscito da poco il mio primo libro: &#8220;Forgia il tuo sito web&#8221;!<\/strong><\/p>\n<p>Al suo interno ti sveler\u00f2 tutti i trucchi pi\u00f9 rapidi e le soluzioni migliori per realizzare e gestire in autonomia il sito web della tua azienda.<\/p>\n<p>Per farti capire quanto \u00e8 utile ti dico una cosa: <a href=\"https:\/\/forgiailtuosito.it\/\" target=\"_blank\" rel=\"noopener\">puoi fare click qui<\/a> e acquistarlo senza neanche dover prima afferrare una tazza del tuo caff\u00e8 preferito!<\/p>\n<p>Continua a seguirmi e vedrai che presto per te sar\u00e0 facilissimo usare il martello per spaccare il web!<\/p>\n<p>A marted\u00ec prossimo,<br \/>\nIl Fabbro<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ciao e bentornata\/o sulla rubrica del Fabbro, La scorsa settimana abbiamo parlato di bottoni e di quanto siano importanti per potenziare al massimo le tue call to action. Questa \u00e8 la seconda parte di quell&#8217;articolo, perci\u00f2 se ti fossi perso l&#8217;introduzione, puoi recuperarla subito facendo click qui. Ecco cosa ti prometto oggi: dopo aver letto questo articolo i tuoi bottoni saranno perfetti, sia su desktop che mobile. parola di Fabbro! Non voglio spoilerare troppo subito, per\u00f2 ti insegner\u00f2 un metodo incredibile per manipolare totalmente l&#8217;aspetto dei tuoi bottoni sui dispositivi mobile. Hai presente le righe di codice che ti ho fatto inserire nel pannello &#8220;Personalizza&#8221; di WordPress marted\u00ec scorso? Molto bene! Partiremo da l\u00ec e perfezioneremo il tutto per assicurarci che i tuoi bottoni siano pi\u00f9 belli, pi\u00f9 visibili e soprattutto pi\u00f9 efficaci! Ci assicureremo anche che siano responsive, in modo tale da massimizzare le conversioni delle call to action su tutto il tuo sito. Con i bottoni che avrai allora sar\u00e0 impossibile per i visitatori del tuo sito non cliccarli, li renderemo irresistibili! Infine, ti mostrer\u00f2 anche come aggiungere una leggera ombreggiatura ai tuoi bottoni, per far s\u00ec che &#8220;stacchino&#8221; dallo schermo e dargli un po&#8217; di tridimensionalit\u00e0. Scommetto che non vedi l&#8217;ora di iniziare, perci\u00f2 adesso raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caff\u00e8 preferito! Dove eravamo rimasti&#8230; Ah s\u00ec! Ora ricordo: ti avevo mostrato come personalizzare i colori dei tuoi bottoni ma si era creato quell&#8217;inconveniente per cui, una volta passato su il mouse, questi sono tornati al loro colore originario. Anche se nel tuo caso questo piccolo inconveniente non sia capitato, devi comunque seguire questo passaggio per avere controllo totale sul colore. Mi spiego meglio. Di solito, quando passi il mouse su un bottone, siamo abituati a vederlo assumere un colore leggermente pi\u00f9 scuro. Ti sei mai chiesto come mai? Beh, per evidenziarlo e mettere al corrente l&#8217;utente che sta per cliccarlo e dopo accadr\u00e0 qualcosa. Ma come si effettua questa modifica? Come modificare il colore dei bottoni al passaggio del mouse Torniamo un secondo al codice della scorsa settimana perch\u00e9 partiremo da l\u00ec. Eccolo, dovrebbe essere pi\u00f9 o meno cos\u00ec (naturalmente il tuo non sar\u00e0 mai identico al mio): a.nome-della-tua-classe { background: #il codice colore che hai copiato e incollato !important; color: #fff !important; } Benissimo, adesso copia il tuo vecchio codice e incollalo esattamente due righe pi\u00f9 in basso all&#8217;interno del pannello Personalizza. In pratica dovrai ritrovarti con due porzioni di codice identiche. Sulla seconda porzione di codice aggiungi la scritta &#8220;:hover&#8221; subito dopo il selettore della classe CSS. Ti ritroverai con la seconda porzione di codice pi\u00f9 o meno simile a questa: a.nome-della-tua-classe:hover { background: #il codice colore che hai copiato e incollato !important; color: #fff !important; } Mi raccomando, fai attenzione a come aggiungi questa scritta e in generale a rispettare la punteggiatura indicata: spesso basta uno spazio indesiderato o un errore di digitazione banale per compromettere il funzionamento del codice. Don&#8217;t panic: il tuo sito non si pu\u00f2 rompere in questo modo, perci\u00f2 sentiti libero di sperimentare. Se accade qualcosa di inaspettato sulla schermata destra dell&#8217;anteprima puoi sempre cancellare il codice e far tornare tutto come prima. Ok! Adesso cerchiamo di capire cosa abbiamo fatto aggiungendo l&#8217;istruzione :hover al codice. In poche parole abbiamo detto al sistema: &#8220;l&#8217;istruzione tra parentesi graffe deve modificare esclusivamente l&#8217;aspetto dei bottoni quando ci si passa sopra il mouse&#8221;. Adesso quindi non ci resta che sostituire il colore indicato dopo la scritta &#8220;background:&#8221; con una tonalit\u00e0 leggermente pi\u00f9 scura. Consiglio: fatti aiutare dal sito coolors per trovare il colore pi\u00f9 adatto alla situazione. Incollaci dentro quello di base (inserito nella prima porzione del codice), fai click su &#8220;Shadows&#8221; e scegli un colore che sia pi\u00f9 scuro di almeno 2 stop. Lascia sempre la scritta &#8220;!important&#8221; dopo aver indicato il codice colore perch\u00e9 serve per sovrascrivere le impostazioni di default del tema WordPress attivo. In altre parole, se la togli c&#8217;\u00e8 rischio che il colore al passaggio del mouse resti identico a prima. Fatto? Ottimo! Adesso nell&#8217;anteprima a destra passa il mouse sul bottone e guarda se \u00e8 filato tutto liscio. Che ne diresti di aggiungere anche una leggera ombreggiatura al bottone per &#8220;staccarlo&#8221; dallo schermo e dargli un po&#8217; pi\u00f9 di tridimensionalit\u00e0? Come aggiungere un&#8217;ombreggiatura ai tuoi bottoni Questa operazione pu\u00f2 rivelarsi molto efficace soprattutto per i bottoni su sfondi chiari. Prenditi un minuto per osservare questo bottone: Sembra quasi uscire fuori dallo schermo, vero? Per ottenere questo risultato basta aggiungere solo un po&#8217; di ombreggiatura. Apri nuovamente il pannello &#8220;Personalizza&#8221; di WordPress. Torna sul primo blocco di codice, ovvero quello che abbiamo scritto insieme la settimana scorsa. Quello che devi fare adesso \u00e8 semplicemente aggiungere uno spazio prima della chiusura della parentesi graffa e scriverci dentro questa istruzione: box-shadow: 0 8px 6px -6px black !important; Il tuo codice adesso dovrebbe essere molto simile a questo: a.nome-della-tua-classe:hover { background: #il codice colore che hai copiato e incollato !important; color: #fff !important; box-shadow: 0 8px 6px -6px black !important; } Nota: pu\u00f2 darsi anche che nel tuo caso non ci sia bisogno di inserire la scritta finale &#8220;!important&#8221; sull&#8217;ultima istruzione, soprattutto se di default i bottoni del tuo tema non hanno un&#8217;impostazione di ombreggiatura. Se cos\u00ec non fosse lascia l\u00ec la scritta e goditi l&#8217;ombreggiatura sui tuoi bottoni! E adesso? Abbiamo finito? Quasi. Diciamo che manca ancora soltanto la parte&#8230; pi\u00f9 importante! Perci\u00f2 se ne hai bisogno afferra un&#8217;altra tazza del tuo caff\u00e8 preferito ma poi torna davanti allo schermo e continua a leggere! Adesso dobbiamo verificare che i bottoni abbiano l&#8217;aspetto migliore possibile anche su cellulare! Come modificare l&#8217;aspetto dei tuoi bottoni sul cellulare Apri ancora una volta il pannello &#8220;Personalizza&#8221; di WordPress e nota bene questa icona: Vista? Adesso cliccaci su. Se hai fatto tutto per bene in questo momento vedrai rimpicciolire la schermata di anteprima sulla destra. Molto bene: quella \u00e8 l&#8217;anteprima dell&#8217;aspetto che avr\u00e0 la pagina del tuo sito su cellulare. Attenzione: la riproduzione dell&#8217;anteprima \u00e8 molto<\/p>\n","protected":false},"author":3,"featured_media":10643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[16,65],"tags":[551,25,217,219,517,550,70,76,464,75,186],"class_list":["post-10641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-argomento-sito","category-la-rubrica-del-fabbro","tag-bottoni","tag-call-to-action","tag-colori","tag-coolors","tag-cta","tag-personalizza","tag-siti-web","tag-siti-web-in-autonomia","tag-siti-web-wordpress","tag-wordpress","tag-wordpress-in-autonomia"],"_links":{"self":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/10641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/comments?post=10641"}],"version-history":[{"count":1,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/10641\/revisions"}],"predecessor-version":[{"id":14120,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/posts\/10641\/revisions\/14120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media\/10643"}],"wp:attachment":[{"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/media?parent=10641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/categories?post=10641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sartoteca.it\/blog\/wp-json\/wp\/v2\/tags?post=10641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}