Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo CSS

Criar um botão neon com borda animada

Imagem
 Criar um botão neon com borda animada Todos os sites possuem botões na mais diversas forma e estilo, todos os botões do site têm seu objetivo de levar usuário para algum lugar. Os botões são mais que uma simples forma de informar a rota eles tem um papel fundamental no momento de chamar a atenção, podendo ser por sua cor, forma e texto chamativo. Um site de sucesso precisa de ter algum diferencia e nesse tutorial vou mostrar como criar um botão animado do estilo neon.   Criar a estrutura HTML do botão neon. Para cria é muito simples, vamos usar a TAG A para ser o link e a TAG SPAN para fazer animações.   <a class="neon-bt" href="#">       <span></span>       <span></span>       <span></span>       <span></span>       Enviar     </a>   Repare que foi criado um CLASS chamada "neon-bt" para cuidar do estilo e animação.   Criar o estilo do botão neon com CSS O estilo do botão está dividido em duas

Efeito GLITCH no título com CSS

Imagem
Efeito GLITCH no título com CSS Colocar um efeito no titulo pode fazer muita diferença quando a intenção é chamar a atenção, vou mostrar como criar um efeito de GLITCH usando o CSS de forma simples. Para criar um efeito com CSS é necessário uma Class na tag HTML que deseja animar e um keyframes que será responsável pela sequência de ações na animação. O que é um efeito GLITCH? O glitch é um efeito que simula essas distorções e interferências, o termo vem do inglês que, traduzido, significa “falha”. TEXTO GLITCH   Criando o HTML para o efeito GLITCH No HTML vamos criar uma  class para aplicar o efeito CSS e um atributo chamado data-text que vai auxiliar na criação do efeito. Para isso funcionar o nome que está dentro da Tag deverá ser o mesmo dentro do atributo. Copie o HTML abaixo. <h2 style="color: #fff" class="glitch" data-text="GLITCH.">GLITCH</h2> Observe que a cor do titulo está como branco então o fundo deve ser escuro

Botão WhatsApp no site igual a um Chat

Imagem
Ganhe mais Leads com esse botão Você já deve ter visto em vários sites na lateral de baixo um botão do WHATSAPP para mandar uma mensagem. Já imaginou um tipo de chat que manda mensagem para o WHATSAPP e também é um tipo de pop up ? Nesse tutorial vou disponibilizar o código para criar um botão WHATSAPP que tem um chat de mentira onde o visitante pode escrever uma pergunta. Criando o botão WHATSAPP no site. Com esse botão o teu site se tornará mais interativo e interessante para o visitante podendo tornar ele um possível LEAD com a função de pop up que vai mostrar na tela o chat aberto e com uma frase para chamar a atenção. No link abaixo tem um site que está utilizando desse botão confira. https://agencianovaacao.com.br/ Se gostou continue lendo! O código é dividido em três partes sendo elas HTML, CSS e JS. No HTML você vai escreve 3 frases simples para chamar a atenção, OBS coloque a rota das imagens de acordo com o teu site. No CSS são

Fazer o Label do formulário subir.

Imagem
Animando a Tag label dos campos inputs. Você já deve ter visto alguns formulários que ao clicar no campo input a palavra de dentro que é o título subir. Isso é bem simples e rápido de ser feito, mas somente vai funciona para formulário onde a Tag label fica abaixo da Tag input. Criando um formulário simples. Este exemplo vai conter um campo de nome, senha e um botão entrar. Será criado uma animação que vai fazer a tag label subir e para ficar mais legal vamos colocar um ícone de confirmado. Copie o HTML abaixo. <form method="POST" class="formBox">                 <h2>Login</h2>                 <div class="inputBox">                                <input type="text" name="nome" required="">                                <label>Nome do usuário</label>                 </div>                 <div class="inputBox"