Carregando...

Botão Html e Css Efeito 3D

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

Botão Html e Css Efeito 3D

Botão Html e Css Efeito 3D

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:

    <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.

.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!

Botão Html e Css Efeito 3D

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar um Botão Html e Css Efeito 3D. 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

28 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados