Botão Piscando Css

Botão Piscando Css, saiba como o CSS3 possibilita a criação de efeitos de animações e transições.

Quando você especifica estilos CSS dentro da regra @keyframes , a animação mudará gradualmente do estilo atual para o novo estilo em determinados momentos.

A regra de @keyframes CSS controla as etapas intermediárias em uma sequência de animação CSS definindo estilos para quadros-chave (ou waypoints) ao longo da sequência de animação. Isso dá mais controle sobre as etapas intermediárias da seqüência de animação do que as transições .

Vamos adicionar o Código Html

Nesta seção, projetaremos uma estrutura simples no botão usando a class=”btn-pisca” no html.

<a href="#" class="btn-pisca"><i class="icon icon-download-2"></i> Download</a>

Vamos adicionar o Css

Nesta seção, usaremos algumas propriedades CSS para projetar o efeito de piscar o botão. para obter o efeito de animação infinito utilizando o @keyframes no css.

 @keyframes btn-pisca {

     0% { opacity: 0; }
     50% { opacity: 0.5; }
     100% { opacity: 1; }
 }

.btn-pisca {

   background-color:#ce300c;
   color:#fff;
   padding: 0.6em 0.8em;
   display: inline-block;
   text-decoration: none;
   border-radius: 4px; 
   -webkit-animation: btn-pisca .9s linear infinite;
   -moz-animation: btn-pisca .9s linear infinite;
   -ms-animation: btn-pisca .9s linear infinite;
   -o-animation: btn-pisca .9s linear infinite;
   animation: btn-pisca .9s linear infinite;
}

Nesta seção, combinaremos as duas seções acima para criar um Botão Piscando Utilizando HTML e CSS.

Código Completo Veja o Resultado! 

Baixar Código Veja Funcionando