- Página Inicial
- Códigos CSS Prontos
- Botão efeito pulse css
- Voltar
Botão efeito pulse css
Como fazer um botão animado?
Este tutorial mostra como criar um Botão com efeito pulsar com html e css.
Nesta seção, projetaremos uma estrutura simples na tag <a>.
temos dentro da tag <a> a class (.btn)
Com a tag de link <a> usaremos para criar o nosso Botão com efeito de pulsar.
Vamos Adicionar o HTML
<a class="btn"> Saiba mais</a>
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o nosso Botão
com efeito de pulsar.
.btn{ position: relative; background-color: black; border-radius: 50px; font-size: 18px; color: #ffffff; padding: 0.5em 1.2em; cursor:pointer; user-select:none; text-align: center; text-decoration: none; cursor: pointer; transition-duration: 0.4s; -webkit-transition-duration: 0.4s; } .btn:hover { transition-duration: 0.1s; background-color: #3A3A3A; } .btn:after { content: ""; display: block; position: absolute; border-radius: 50px; left: 0; top:0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s; box-shadow: 0 0 10px 60px #fd6f61; } .btn:active:after { box-shadow: 0 0 0 0 #fd6f61; position: absolute; border-radius: 50px; left: 0; top:0; opacity: 1; transition: 0s; } .btn:active { top: 2px; background-color:#fd6f61; }
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
502 Visualizações
Deixe um comentário