dev [Código] Botão 3D em HTML (Botão que afunda ao clicar)

Blonorr · Fevereiro 3, 2018

Olá, me chamo João Vitor, tenho 23 anos e sou Web Designer.

Muita gente tem dúvida de como fazer um botão 3D com efeito de "afundar" e hoje irei apresentar

um código de um botão feito por mim.

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Botão 3D</title>
  
  <! -- Autor  -->
  <meta name="author" content="JuaumFP">
  
</head>
<body>
  <h1>Botão 3D</h1>
  <a href="#"><button class="btn btn-verde">Texto</button</a>
  
</body>
</html

CSS:

/** estilo do botão **/
.btn {
  font-family: arial;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  padding: 10px;
  cursor: pointer;
}
/** botão verde **/
.btn-verde {
  background: green;
  color: #fff;
  box-shadow: 0 5px #006000;
}
/** Quando passar o mouse em cima do botão **/
.btn-verde:hover {
  background: #006000;
  color: #fff;
  box-shadow: 0 5px #003f00;
}
/** Quando clicar no botão **/
.btn-verde:active {
  position: relative;
  top: 5px;
  box-shadow: none;
}

h1 {
  text-align: center;
}

Deem uma estudada no código para aprenderem.

Como meu professor dizia "Estudar códigos comentados é a melhor forma de aprender"

Editado Fevereiro 3, 2018 por JuaumFP

Blonorr · Fevereiro 3, 2018

Caso queira encomendar algum site, entre em contato:

Discord: JuaumFP#8374

Whatsapp: (65) 98443-2050

Entrar

dev [Código] Botão 3D em HTML (Botão que afunda ao clicar)

Posts Recomendados

Blonorr

Link para o comentário

Compartilhar em outros sites

Blonorr

Link para o comentário

Compartilhar em outros sites

Participe da Conversa

Conteúdo Similar

Popular Agora

Quem está navegando 0 membros estão online

Equipe