Botão Pulse com Css

Postado: 4 de maio de 2021

A propriedade de animação em CSS pode ser usada para animar muitas outras propriedades CSS, como cor, cor de fundo, altura ou largura.

Cada animação precisa ser definida com @keyframes at-rule, que é então chamada com a propriedade animation.

Veja o exemplo abaixo:

<div class="box-pulse">
   <a href="#" class="botao-pulse"><i class="icon icon-heart-3"></i> Botão Pulsa</a>
</div>

Vamos Adicionar o Css:

/*Botão Pulsa*/
.box-pulse { 

    width:100%; 
    width:250px; 
    margin:0 auto; padding:0 30px;
}

.box-pulse a {
  
  text-decoration:none;
  display: inline-block;
  font-size: 1.1em;
  font-family:Verdana, Geneva, sans-serif;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

}

.botao-pulse {
  padding: 20px 30px;
  color: #fff;
  background-color: #d20000;
  border-radius:3px; 
  -webkit-animation: pulse 1s ease infinite;
  -moz-animation: pulse 1s ease infinite;
  -ms-animation: pulse 1s ease infinite;
  -o-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}

.botao-pulse:hover {
  color: #fff;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }

  25% {
    -webkit-transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }

  25% {
    -moz-transform: scale(1.1);
  }

  50% {
    -moz-transform: scale(1);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }

  25% {
    -ms-transform: scale(1.1);
  }

  50% {
    -ms-transform: scale(1);
  }

  100% {
    -ms-transform: scale(1);
  }
}

@-o-keyframes pulse {
  
  0% { -o-transform: scale(1); }
  25% { -o-transform: scale(1.1); }
  50% { -o-transform: scale(1); }
  100% { -o-transform: scale(1); } 

}

@keyframes pulse { 

  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

/*Botão Pulsa*/

Baixar Código Veja Funcionando

Publicado por: loopnerd

5.384 Visualizações

Uma resposta para “Botão Pulse com Css”

Deixe um comentário

O seu endereço de e-mail não será publicado.