Quante volte ci è capitato di scegliere un tema/framework CSS ripetto ad un altro, solamente perchè alla prima demo notiamo effetti scenici mozzafiato, con transizioni di elementi, hover, cambi di colore, e così via? E quante volte poi, ci siamo sentiti dire "Il cliente conosce Bootstrap, quindi dobbiamo utilizzare quello". Se rientriamo in questa casistica l'utilizzo di un framework con i soli stili di base, non deve essere vista come una perdita, ma come un'opportunità per avere la piena libertà sul controllo della pagina.

In questa serie di script andremo a mostrare alcune piccole migliorie che possiamo applicare a qualunque framework CSS, che renderanno la nostra pagina più dinamica e più piacevole.

L'elemento più utilizzato, e su cui si fanno più studi di design è sicuramente il bottone. Che colore? Verde per approvare, rosso per rifiutare, grigio disattivato, profilo angolare, profilo smussato, ecc.. queste sono tutte specifiche framework e del gusto del cliente. Il nostro target è rendere l'interfaccia più dinamica! Possiamo far sì che quando l'utente sta premendo un bottone qualsiasi, venga simulata l'azione reale di uno schiacciamento

.btn {
    transition: transform 0.2s ease;
}
.btn:active {
    transform: scale(0.95);

}

Nella classe base inseriamo come la transizione, in questo caso una trasformazione, debba essere gestita: avvenire in 0.2 secondi con un picco di velocità nella fase centrale.

Se un bottone deve poi attirare l'attenzione, è consigliabile fargli cambiare colore, o ancor meglio pulsare, in modo che l'occhio ne venga naturalmente attratto.

.btn-pulse {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

Con l'utilizzo di un keyframe abbiamo la possibilità di stabilire le caratteristiche del bottone ad ogni percentuale dell'animazione. In questo caso l'animazione sarà infinita, quindi il movimento sarà continuativo da 0 a 100 e viceversa. In entrambe le estremità il bottone non subirà cambiamenti, ma a metà (50%) la sua dimensione aumenterà del 5%.