Criar um botão de batimento cardíaco

, Author

Para um botão principal ou mesmo para um botão que queira realçar, oferecer este efeito de batimento cardíaco pode dar uma sensação muito moderna ao seu website. Descobre neste artigo como conseguir este efeito.

Passo 1

P>

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

Só precisamos de um link.

Passo 2

P>Legue-se com o 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;}

Neste passo, utilizamos uma animação CSS através da propriedade de animação.

Especificamos que queremos usar a função cubic-bezier, que é uma função para fazer a velocidade da animação mudar durante a sua execução.

Então, graças aos valores que damos à função, podemos ter a animação a começar rapidamente com a primeira batida e depois desvanecer no final.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *