- Página Inicial
- Códigos CSS Prontos
- Botão pulsante css
- Voltar
Botão pulsante css
Neste tutorial veja como criar um efeito de botão pulsante com html e css.
Nesta seção, projetaremos uma estrutura simples na tag <a>.
temos dentro da tag <a> a class (.botao) e (.animation) e a tag <i> para inserir o icone desejado.
Com a tag de link <a> usaremos para criar o nosso Botão pulsante.
Vamos Adicionar o HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <a href="#" class="botao animation"> <i class="fa fa-whatsapp"></i> </a>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso Botão
com efeito pulsante.
.animation { animation: alerta 1.5s infinite; } .botao { background: #09a513; color: white; border: 1px solid #09a513; border-radius: 70px; box-shadow: 0 0 0 0 rgba(9, 165, 19, 0.50); font-size: 30px; display: inline-block; text-align: center; width: 60px; height: 60px; line-height: 55px; text-decoration: none; transition: background, padding 500ms ease-in-out; } @keyframes alerta { 0% { transform: scale(); } 70% { transform: scale(); box-shadow: 0 0 0 50px rgba(69, 152, 27, 0); } 100% { transform: scale(); box-shadow: 0 0 0 0 rgba(69, 152, 27, 0); } }
Combinando as Duas seções acima Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
2.484 Visualizações
Deixe um comentário