Crea un pulsante a battito cardiaco

, Author

Per un pulsante principale o anche per un pulsante che vuoi mettere in evidenza, offrire questo effetto battito cardiaco può dare un tocco molto moderno al tuo sito web. Scoprite in questo articolo come ottenere questo effetto.

Step 1

Cominciamo con il codice HTML.

<a href="#" class="coeur">BELIEVEMY</a>

Abbiamo solo bisogno di un link.

Passo 2

Affrontiamo il link.

.coeur { text-align: center; padding: 12px 24px; color: #fff; border-radius: 5px; background: #F34D4D; box-shadow: 0 0 0 0 rgba(255, 71, 84, .7); animation: battement 2s infinite cubic-bezier(.66, 0, 0, 1); text-decoration: none;}

In questo passo, usiamo un’animazione CSS attraverso la proprietà animation.

Specifichiamo che vogliamo usare la funzione cubic-bezier, che è una funzione per far cambiare la velocità dell’animazione durante la sua esecuzione.

Così, grazie ai valori che diamo alla funzione, possiamo avere l’animazione che parte veloce con la prima battuta e poi svanisce alla fine.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *