Botão Css Efeito Listrado

Botão Css Animado ícone Efeito Giratório

Botão Css Animação Up

Postado: 18 de janeiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo vamos criar um Botão Css Efeito Listrado. mesmo com pouco conhecimento na área do desenvolvimento web.

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 Css Efeito Listrado.

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="botao">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 Efeito Listrado.

.botao {

  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  background-color: #3b3b3b;
  border: none;
  border-radius: 50px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  transition: .3s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;

}

.botao::before {

  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-color: #57575700;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  z-index: -1;

}

.botao::after {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 30px 30px;
  opacity: 0;
  transition: opacity 0.4s ease;

}

.botao:hover {

  background-color: #ff8f00;
  transform: scale(1.1);
  letter-spacing: 2px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);

}

.botao:hover::before {

  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: scale(1.1);

}

.botao:hover::after { opacity: 1;}

.botao:active {

  background-color: rgb(119, 119, 119);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  transform: translateY(1px);

}

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

Veja o Resultado baixo!