Botão Html e Css com Listras Animadas

Botão Html e css Icone Efeito Slide

Botão Html e Css Animação Simples

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

Neste artigo veja como fazer Botão Html e Css com Listras Animadas.

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 <span> para inserirmos o texto desejado.

Essa tag que usaremos para criar o nosso Botão Html e Css com Listras Animadas.

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="botao-animado">
   <span>Enviar</span>
 </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

.botao-animado,
.botao-animado *,
.botao-animado :after,
.botao-animado :before,
.botao-animado:after,
.botao-animado:before {
  
  border: 0 solid;
  box-sizing: border-box;

}

.botao-animado {

  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #193791;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;

}

.botao-animado:disabled {
  cursor: default;
}

.botao-animado:-moz-focusring {
  outline: auto;
}

.botao-animado {
  border-radius: 50px;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}

.botao-animado span {
  
  z-index: 1;
  content: #ffffff;

}

.botao-animado:before {
  
  -webkit-animation: bg-scroll 3s linear infinite;
  animation: bg-scroll 3s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  background: repeating-linear-gradient( 45deg, hsla(0, 0%, 100%, 0.2), hsla(0, 0%, 100%, 0.1) 0.9%, transparent 0, transparent 3% );
  content: "";
  display: block;
  height: 300%;
  left: -100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s, background-color 0.2s;
  width: 300%;

}

.botao-animado:hover:before {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  opacity: 1;
}

.botao-animado:active:before {
  
  background-color: #ffbf00;
  z-index: -1;

}

@-webkit-keyframes bg-scroll {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(33%);
  }
}

@keyframes bg-scroll {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(33%);
  }
}

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

Veja o Resultado baixo!