Efeito de Gradiente Animado no Botão

CSSPersonalização
Este código CSS é usado para adicionar um efeito de gradiente animado aos botões do Elementor e uma sombra colorida quando o botão é focado com o cursor (hover).

Como instalar

Copie e cole o código na seção Custom CSS do Elementor ou no arquivo CSS do seu tema WordPress.

Explicando o código

  • selector .elementor-button: Este seletor aponta para os botões do Elementor.
  • background: linear-gradient(...): Define um gradiente linear como plano de fundo do botão com quatro cores diferentes.
  • background-size: 800% 400%;: Ajusta o tamanho do plano de fundo para criar um efeito de gradiente mais suave.
  • transition: all .5s;: Adiciona uma transição suave a todas as propriedades do botão durante 0.5 segundos.
  • animation: gradient 10s infinite cubic-bezier(...) : Aplica uma animação chamada gradient que dura 10 segundos e se repete infinitamente com uma curva de aceleração específica.
  • @keyframes gradient {...}: Define os keyframes da animação gradient, que altera a posição do plano de fundo do botão, criando um efeito de movimento de gradiente.
  • selector .elementor-button:hover {...}: Este seletor aponta para o estado de hover do botão, aplicando três sombras diferentes, criando um efeito de glow/neon quando o botão é focado com o cursor.

Códigos

CSS

				
					/* Estilo Principal */
selector .elementor-button{
 background: linear-gradient(-45deg, #5f0aa0, #fa0cfa, #27c8b7, #3f00b5);
 background-size: 800% 400%;
 transition: all .5s;
 animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;
}

@keyframes gradient {
 0% {
  background-position: 0% 50%;
 }

 50% {
  background-position: 100% 50%;
 }

 100% {
  background-position: 0% 50%;
 }
}

selector .elementor-button:hover {
 box-shadow: 0 0 5em 0.0001em #2752F3,
        0 0 2em 0.2em #0FC754,
        inset 0 0 .5em .5em #2752F3;
}

				
			

Exemplo

Relacionados

Efeito de Brilho em Botão do Elementor

Este código CSS aplica um efeito de brilho...
CSSEstilo

Efeito de Gradiente Animado no Botão

Este código CSS é usado para adicionar um...
CSSPersonalização

Adicionando Bordas ao Texto com CSS

O código é utilizado para adicionar bordas ao...
CSSPersonalização

Fale com a Lab1