Botão Css3 Animado

Menu html css e jquery com efeito marcado

Botão Css Animado ícone Efeito Giratório

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

Botão Css3 Animado – Construindo Botão Gradiente

Olá Nerd, neste artigo vamos criar um Botão Css3 Animado. 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> e a <span> para inserirmos o texto.

Essa tag que usaremos para criar o nosso Botão Css3 Animado.

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">
   <span class="texto"> 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 Css3 Animado.

CSS

.botao {

  position: relative;
  display: flex;
  margin: auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 15px 40px;
  font-size: 15px;
  font-weight: bold;
  border-width: 0;
  border-radius: 50px;
  cursor: pointer;
  transition: .2s ease;

}

.texto {
  font-size: 1.2em;
  color: #ffffff;
  z-index: 1;
}

.botao::before {
  
  position: absolute;
  content: '';
  width: 120%;
  height: 260%;
  background-image: linear-gradient(135deg, rgb(57, 57, 57) 0%, rgb(0, 124, 255) 80%);

}

.botao::after {
  
  position: absolute;
  content: '';
  width: 93%;
  height: 85%;
  border-width: 0;
  border-radius: 50px;
  background-color: black;
  transition: 100ms ease;

}

.botao:hover.botao {
  transform: scale(1.1);
}

.botao:hover.botao::after {
  background-color: #797979;
}

.botao:hover.botao::before {
  animation: turn_4810 .4s infinite linear;
}

.botao:active.botao {
  transform: scale(1.05);
}

.botao:active.botao::before {
  transform: scale(1.05);
  animation: turn_4810 .3s infinite linear;
}

@keyframes turn_4810 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

Veja o Resultado baixo!