Pulsanti CSS: sono la prima cosa con cui i visitatori interagiscono su un sito web. Un buon pulsante attira lo sguardo, invita all'azione e funziona senza JavaScript su mobile. Uno scadente si mimetizza con lo sfondo e non dà alcun feedback quando viene premuto. Eppure la maggior parte dei pulsanti si assomiglia: un rettangolo piatto, un cambio colore al passaggio del mouse e nient'altro. Ma un pulsante può essere un elemento di design a sé stante, con animazioni, un effetto 3D, un riempimento sfumato o un'icona che scorre dentro al passaggio del mouse.

Uno dei set di pulsanti creativi più noti è CreativeButtons dello studio Codrops. È una raccolta di otto categorie di stili che spaziano dai bordi minimalisti alle trasformazioni volumetriche 3D. Il codice sorgente è aperto, il codice è pulito e la pagina demo funziona ancora a 13 anni dalla pubblicazione. In questo articolo vedremo quali stili sono inclusi nel set, come aggiungerli a qualsiasi sito web e come integrarli con WordPress tramite functions.php.

💡 Panoramica rapida:

• Scarica l'archivio dalla repository GitHub di Codrops, che contiene tutti i file CSS e il markup demo
• Collega component.css e default.css al tuo progetto, copia il markup HTML per lo stile di pulsante che ti serve
• Per WordPress, aggiungi wp_enqueue_style nel functions.php del tuo tema, specificando il percorso dei file nella cartella del tema
• Personalizza colori e dimensioni per adattarli al tuo design: sovrascrivi le proprietà CSS in un foglio di stile child
• Guarda il tutorial sugli effetti CSS per pulsanti qui sotto per vedere le animazioni in azione

Che cos'è CreativeButtons

Codrops ha pubblicato CreativeButtons a giugno 2013 come dimostrazione delle capacità espressive dei CSS3. Il set include otto categorie di stili, ciascuna pensata per risolvere un compito visivo specifico:

Ogni pulsante è puro HTML e CSS. Alcuni stili (come btn-4 con icona) usano JavaScript per attivare classi al click, ma la magia principale risiede in transition, transform e negli pseudo-elementi ::before e ::after.

Le icone nel set provengono dalla libreria IcoMoon. Vengono inserite tramite lo pseudo-elemento ::before con un carattere proveniente da un font di icone, eliminando la necessità di caricare file SVG separati.

Markup HTML: uno schema universale

Il markup dei pulsanti è volutamente semplice. Lo sviluppatore aggiunge una classe comune e due classi numerate a un elemento <button>:

1
<button class="btn btn-6 btn-6d">Button</button>

La classe btn resetta gli stili del browser (bordo, outline, sfondo). La classe btn-6 contiene le proprietà comuni per la categoria (bordo tratteggiato, arrotondamento). La classe btn-6d è lo stile individuale per un pulsante specifico all'interno della categoria. Questa struttura a tre livelli permette di combinare decine di varianti con una duplicazione minima del codice.

Se il pulsante contiene un'icona, si aggiunge un'altra classe, ad esempio btn-4a icon-arrow-right. L'icona viene renderizzata tramite ::before con un carattere di contenuto dal font IcoMoon:

1
.btn-4a::before {
2
    content: "\e005";
3
    font-family: 'icomoon';
4
    margin-right: 8px;
5
}

Una nota importante: nella versione demo, le classi sono separate solo a scopo dimostrativo. In un progetto di produzione, le proprietà per uno stile andrebbero combinate in un'unica classe, riducendo il peso del selettore e semplificando le sovrascritture.

Stili CSS: dal reset all'animazione

La classe base .btn fa il minimo indispensabile: rimuove sfondo, bordo e padding del browser, imposta cursor: pointer e position: relative (per posizionare gli pseudo-elementi). Tutta l'espressività deriva dalle classi di categoria e individuali.

Ecco un esempio di stili per il pulsante btn-6d (bordo tratteggiato con riempimento al passaggio del mouse):

1
/* Button 6d — dashed border with background fill */
2
.btn-6d {
3
    border: 2px dashed #226fbe;
4
    color: #226fbe;
5
    background: transparent;
6
    transition: all 0.3s ease;
7
}
8
 
9
.btn-6d:hover {
10
    background: #226fbe;
11
    color: #fff;
12
}

Nessuna magia, solo transition e il cambio dei valori di background e color al passaggio del mouse. Questo stesso principio è alla base di tutte e otto le categorie. La differenza sta nei dettagli: alcune aggiungono transform: scale(), altre usano box-shadow per la profondità, altre ancora animano tramite @keyframes per un ciclo di pulsazione infinito.

Collegamento a WordPress

Per far funzionare i pulsanti in un tema WordPress, devi caricare i file CSS nella cartella del tema e includerli tramite wp_enqueue_style. Crea una sottocartella (ad esempio, JS_CSS_Plugins/CreativeButtons/css/) nella directory del tuo tema attivo e copia lì component.css e default.css.

Poi aggiungi questo al functions.php:

1
/**
2
 * Enqueue CreativeButtons CSS files.
3
 * Source: https://github.com/codrops/CreativeButtons
4
 */
5
function creativebuttons_enqueue_styles() {
6
    $theme_uri = get_template_directory_uri();
7
 
8
    wp_enqueue_style(
9
        'creativebuttons-component',
10
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/component.css',
11
        array(),
12
        '1.0.0'
13
    );
14
 
15
    wp_enqueue_style(
16
        'creativebuttons-default',
17
        $theme_uri . '/JS_CSS_Plugins/CreativeButtons/css/default.css',
18
        array(),
19
        '1.0.0'
20
    );
21
}
22
add_action( 'wp_enqueue_scripts', 'creativebuttons_enqueue_styles' );

Le due funzioni separate dell'esempio originale sono state sostituite con una sola, rendendo il codice più pulito e facile da mantenere. L'ordine di inclusione è importante: prima component.css (stili principali di categoria), poi default.css (stili individuali dei pulsanti). Se c'è un conflitto con il tuo tema, sovrascrivi le proprietà necessarie in un foglio di stile child con priorità più alta.

Alternative moderne: cosa è cambiato in 13 anni

CreativeButtons è un set collaudato nel tempo, ma i CSS hanno fatto molta strada dal 2013. Se stai avviando un nuovo progetto nel 2026, prendi in considerazione strumenti più moderni:

• Variabili CSS. Invece di un valore fisso come #226fbe, usa var(--btn-primary). Questo semplifica i cambi di schema colore e il supporto per il tema scuro.
• Proprietà logiche. padding-inline e margin-block invece di padding-left/right e margin-top/bottom, così il pulsante viene visualizzato correttamente nelle lingue RTL senza codice aggiuntivo.
• prefers-reduced-motion. Racchiudi le animazioni in una media query e disabilitale per gli utenti sensibili al movimento.
• Raccolte già pronte. Free Frontend mantiene una raccolta di oltre 220 pulsanti CSS con demo su CodePen, e Uiverse offre più di 1900 opzioni con compatibilità Tailwind.

Ma se hai bisogno di un set minimalista e comprensibile che non dipenda da framework, CreativeButtons resta un'ottima scelta. Il codice si legge in mezz'ora, si modifica per qualsiasi design e non ha dipendenze.

Guarda questo breve tutorial sugli effetti hover CSS, dalle transizioni di base alle animazioni complesse in puro CSS:

Il video mostra chiaramente come funzionano le animazioni di transition, transform e keyframes sui pulsanti. Dopo averlo visto, sarai in grado non solo di replicare gli stili di CreativeButtons ma anche di scrivere i tuoi effetti da zero.

⁉️🤔 Domande frequenti

Posso usare CreativeButtons in progetti commerciali?

Sì, il codice sorgente è distribuito liberamente. La repository GitHub non contiene una licenza esplicita, ma Codrops pubblica le risorse demo come pubblicamente disponibili per studio e utilizzo. Per la massima certezza, aggiungi un link alla fonte nei commenti del tuo CSS.

Devo includere entrambi i file CSS?

No. Se ti serve un solo stile di pulsante, copia le regole CSS corrispondenti nel foglio di stile principale del tuo tema. component.css e default.css sono separati per facilitare la navigazione della demo, non per necessità tecnica.

Come cambio il colore del pulsante per adattarlo al mio brand?

Trova il selettore per lo stile che ti serve in default.css (ad esempio, .btn-6d) e sostituisci i valori di color e border-color. Per gli stili sfumati (btn-8), sostituisci i colori in background-image: linear-gradient(). Sovrascrivi in un tema child o nel personalizzatore di WordPress (la sezione "CSS aggiuntivo").

I pulsanti funzionano su dispositivi mobili?

Sì, tutti gli effetti sono basati su :hover e transition, che sono gestiti correttamente dai browser mobile. Tieni presente che i touchscreen non hanno un vero stato di hover: il browser applica gli stili hover al primo tocco e l'azione si attiva al secondo. Per i pulsanti CTA critici, usa stili che funzionino bene anche senza l'effetto hover.

Vale la pena usare CreativeButtons nel 2026

CreativeButtons è un caso raro in cui il codice del 2013 rimane funzionale e utile. Le specifiche CSS su cui è costruito (transition, transform e pseudo-elementi) sono diventate da tempo uno standard e sono supportate da tutti i browser.

Usa questo set se ti servono: prototipazione rapida senza framework, una base di codice chiara per formare sviluppatori junior, o stili già pronti per un progetto personale che non richiede un design system di livello enterprise. Per un grande progetto commerciale, ha più senso scegliere una raccolta moderna con variabili CSS e supporto integrato per l'accessibilità.

Scarica CreativeButtons da GitHub e prova una qualsiasi delle otto categorie sul tuo progetto, dal prototipo alla produzione.