Botão Css

Botão Css

Aprenda a criar efeitos simples em botões CSS animados, mas funcionais para seus Botões HTML usando a regra :Efeito hover CSS, Efeito Pulsar Css, Hover Efeito Reflexo, Efeito fadein, efeito Icones animados  e muito mais. Exemplo simples e mais avançados para você aplicar em seus projetos Web.

O Botão é um elemento presente em praticamente todos os sites, Blogs  e sistemas na web.

Neste artigo passo a passo veja como você pode construir um botão do zero com HTML e CSS, mesmo com pouco conhecimento na área do desenvolvimento você pode criar coisas incríveis com alguns passos básicos.

Nesta seção, projetaremos uma estrutura simples na tag <div>, <i> e a tag <a> para inserirmos o link de destino. 

Essas são as tags que usaremos para criar o nosso Botão css.

Estrutura Código HTML

A primeira coisa que você deve fazer é colocar todas as tags html básicas que são essenciais independente de qual projeto esteja sendo desenvolvido, veja o exemplo abaixo.

  <div class="container-btn">
    <div class="btn"><a href="#"><i class="icon icon-magic"></i> Leia mais</a></div>
  </div>

Estrutura Código CSS

Para conseguirmos um design mais atraente, vamos adicionar algumas propriedades  CSS  para as tags que foram colocadas na sessão acima 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 o nosso Botão css com Efeito Neon.

.container-btn {

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 200px;
  margin: auto;

}

.container .btn {

  height: 50px;
  margin: 20px;
  margin-bottom: 40px;
  position: relative;
  width: 160px;

}

.container-btn .btn a {

  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  box-shadow: 0 15px 35px rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  justify-content: center;
  letter-spacing: 1px;
  text-decoration: none;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(15px);
  z-index: 1;
  transition: 0.5s;

}

.container-btn .btn:hover a {
  letter-spacing: 3px;
}

.container-btn .btn a::before {

  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left,
                rgba(255,255,255,0.15),
                transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;

}

.container-btn .btn:hover a::before {
  transform: skewX(45deg) translateX(200%);
}

.container-btn .btn::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  height: 10px;
  width: 30px;
  background: rgb(8, 107, 183);
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.container-btn .btn:hover::before {
  bottom: 0;
  height: 50%;
  width: 40%;
  border-radius: 30px;
  transition-delay: 0.2s;
}

.container-btn .btn::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -3px;
  height: 10px;
  width: 30px;
  background: rgb(7, 95, 189);
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.container-btn .btn:hover::after {
  top: 0;
  height: 50%;
  width: 40%;
  border-radius: 30px;
  transition-delay: 0.2s;
}

.container-btn .btn:nth-child(1):before,
.container-btn .btn:nth-child(1)::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff,
    0 0 15px #2bd2ff,
    0 0 30px #2bd2ff,
    0 0 60px #2bd2ff;
}

.container-btn .btn:active a {
  color: #000;
}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Botão css

Baixar Código Veja Funcionando

Conclusão

Neste artigo, você aprendeu o passo a passo de como criar um Botão Css com efeito Neon, existem diversos formas de criar botões.

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)