Botão Css Animação Up

Botão Css Efeito Listrado

Como fazer um menu dropdown Responsivo

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

Neste artigo vamos criar um Botão Css Animação Up. 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 nas tags <button> e <span> para inserirmos o texto.

Essa tag que usaremos para criar o nosso Botão Css Animação Up.

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">
      <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 Animação Up.

.botao {

  width: 150px;
  height: 50px;
  border-radius: 50px;
  background-color: transparent;
  border: 2px solid #007cff;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  transition: 200ms ease;

}

.botao span { transition:.2s; color:#007cff; z-index:2; position:relative; }

.botao::before {

  content: "";
  position: absolute;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #248eff;
  top: 100%;
  left: 0;
  transition: 500ms ease;

}

.botao:hover.botao span { color: #fff; letter-spacing: 3px; }

.botao:hover::before {
  
  color:#fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.botao:active.botao span { color: #000; letter-spacing: 1px; }

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

Veja o Resultado baixo!