Botão Html e Css Efeito de Duas Camadas

Botões de Redes Sociais Efeito 3D

Botão Html e css Icone Efeito Slide

Postado: 12 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo veja como fazer Botão Html e Css Efeito de Duas Camadas.

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 na tag <button>

Essa tag que usaremos para criar o nosso Botão com efeito de duas camadas.

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:

HTML

<button class="button">Enviar</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.

CSS

.button {

  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: rgb(51, 49, 49);
  border: none;
  color: white;
  position: relative;
  width: 120px;
  height: 45px;
  cursor: pointer;
  transition: background-color 0.2s ease-in, all 0.15s ease-in;

}

button::after {

  display: flex;
  align-items: center;
  justify-content: center;
  content: "Enviar";
  width: 120px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(5px, 5px);
  background-color: white;
  color: rgb(51, 49, 49);
  border: 2px solid rgb(51, 49, 49);
  transition: all 0.15s ease-in;

}

button:hover::after {
  transform: translate(-8px, -9px);
}

button:hover {
  transform: translate(5px, 5px);
}

button:active::after {
  background-color: rgb(239, 239, 239);
}

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

Veja o Resultado baixo!