Botão Html e Css Efeito 3D

Botão Html e Css Animação Simples

ícones de Redes Sociais em html e css

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

Neste artigo veja como fazer Botão Html e Css Efeito 3D.

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 <i> para inserirmos o ícone que desejar para o botão html.

Essa tag que usaremos para criar o nosso Botão Html e Css Efeito 3D.

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="btn-3d">
   <i class="icon icon-hand-o-right"></i> 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

.btn-3d {

  --font-color: #fefefe;
  --bg-color: #007cff;
  --main-color: #1b5caf;

  width: 120px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid var(--main-color);
  background-color: var(--bg-color);
  box-shadow: 4px 4px var(--main-color);
  font-size: 17px;
  font-weight: 600;
  color: var(--font-color);
  cursor: pointer;

}

.btn-3d:active {

  box-shadow: 0px 0px var(--main-color);
  transform: translate(3px, 3px);

}

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

Veja o Resultado baixo!