- Página Inicial
- Códigos CSS Prontos
- Botão Html e Css com Efeito Reflexo
- Voltar
Botão Html e Css com Efeito Reflexo

Neste artigo vamos criar um Botão Html e Css com Efeito Reflexo. mesmo com pouco conhecimento na área do desenvolvimento web veja como criar um Botão com Efeito Reflexo.
Estrutura Base que vamos usar no projeto!
A estrutura base do nosso pequeno projeto para o botão vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.
Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.
Nesta seção, projetaremos uma estrutura simples nas tags <button>, e a tag <span> para inserirmos o texto.
Essa tag que usaremos para criar o nosso Botão com Efeito Reflexo
.
A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.
Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Botão
.
Estrutura Código Html:
<button class="botao"> <span>Enviar</span> </button>
Estrutura Código CSS
Para conseguirmos o efeito desejado no botão, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.
Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.
Nesta seção, usaremos algumas propriedades CSS para estilizar os nosso Botão.
.botao { position: relative; padding: 10px 20px; font-family: inherit; background-color: transparent; border: 2px solid; font-size: 20px; font-weight: 600; color: #202020; cursor: pointer; overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .botao:hover span { background: linear-gradient(135deg, #007cff 0%, #00d1be 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .botao::before { position: absolute; content: ''; width: 100%; height: 100%; left: -110%; top: -0%; background: #00d1be; pointer-events: none; margin: auto; transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); } .botao:hover { letter-spacing: 2px; border-image: linear-gradient(135deg, #007cff 0%, #00d1be 100% ); border-image-slice: 1; } .botao:hover::before { left: 110%; } .botao:active { scale: 0.95; }
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Veja o Resultado baixo!
Botão Html e Css com Efeito Reflexo
Baixar Código Veja Funcionando
Neste artigo, você aprendeu o passo a passo de como criar Botão Html e Css com Efeito Reflexo. existem diversas formas de criar botões com efeitos, cores, formas e animações diferentes.
Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.
faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.
A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)
Publicado por: Loop Nerd
146 Visualizações
Deixe um comentário